@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Une seule ambiance : salle de projection. Fond nuit teinté, texte lin, un seul accent ambre (le faisceau du projecteur). */
:root {
  --bg: #0F1013;
  --bg-2: #15171B;
  --surface: #1B1E23;
  --line: #2A2E35;
  --fg: #ECE9E3;
  --fg-2: #9A9CA3;
  --fg-3: #6B6E76;
  --accent: #E8B04A;
  --accent-ink: #1A1408;
  --ok: #7FCF9A;
  --danger: #F08A7E;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --r-s: 4px;
  --r-m: 10px;
  --r-l: 22px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --z-header: 20;
  --z-grain: 40;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s var(--ease); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; z-index: 99; border-radius: var(--r-s); }
.skip:focus { top: 1rem; }
.plain { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Grain : casse la platitude du numérique */
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: clamp(80px, 11vw, 160px); padding-bottom: clamp(88px, 12vw, 176px); }
.section-tight { padding-bottom: clamp(72px, 9vw, 128px); }

/* Typo : serif d'affiche pour les titres, Geist pour le reste */
.h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.02em; }
.h1 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .95; max-width: 15ch; }
.h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; max-width: 18ch; }
.h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--fg-2); max-width: 54ch; margin: 1.4rem 0 0; line-height: 1.55; }
.link { font-size: .95rem; font-weight: 500; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line); }
.link:hover { text-decoration-color: currentColor; }
.empty { color: var(--fg-2); padding: 2rem 0; }

/* Boutons : un plein (ambre), le reste en texte */
.btn { display: inline-flex; align-items: center; gap: .5rem; font: 500 .98rem/1 var(--sans); background: var(--accent); color: var(--accent-ink); padding: 1.05rem 1.5rem; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(232, 176, 74, 0); transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .2s; }
.btn:hover { color: var(--accent-ink); background: #F0BE5E; box-shadow: 0 10px 36px -8px rgba(232, 176, 74, .45); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-ghost, .btn-text { background: none; border: 0; padding: .4rem 0; font: 500 .98rem var(--sans); color: var(--fg); text-decoration: underline; text-decoration-color: var(--fg-3); text-underline-offset: .3em; cursor: pointer; }
.btn-ghost { display: inline-flex; align-items: center; padding: 1.05rem .2rem; }
.btn-ghost:hover, .btn-text:hover { color: var(--accent); text-decoration-color: currentColor; background: none; box-shadow: none; transform: none; }
.btn-small { padding: .7rem 1.1rem; font-size: .9rem; }
.btn-light { background: var(--fg); color: var(--bg); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem; }

/* Header : barre de verre */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); padding-top: .8rem; }
.header-in { display: flex; align-items: center; justify-content: space-between; height: 64px; border-radius: 999px; padding-inline: 1.4rem .5rem;
  background: rgba(21, 23, 27, .55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 40px -18px rgba(0, 0, 0, .8);
  max-width: calc(var(--max) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.brand img { height: 44px; width: auto; }
.brand { display: block; transition: opacity .2s; }
.brand:hover { opacity: .8; }
.site-nav { display: flex; align-items: center; gap: .3rem; }
.site-nav a:not(.btn) { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--fg-2); padding: .55rem .9rem; border-radius: 999px; transition: color .2s, background .2s; }
.site-nav a:not(.btn):hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--fg); background: rgba(255, 255, 255, .08); }
.site-nav .btn { margin-left: .4rem; }
.menu-toggle { display: none; font: 500 .9rem var(--sans); background: rgba(255, 255, 255, .07); border: 0; border-radius: 999px; padding: .6rem 1rem; color: var(--fg); cursor: pointer; }
@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + .5rem); left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: stretch; gap: 0; padding: .8rem; border-radius: var(--r-l);
    background: rgba(21, 23, 27, .96); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); display: none; }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { font: 400 2rem/1.1 var(--serif); color: var(--fg); padding: .6rem .8rem; }
  .site-nav .btn { margin: .8rem 0 0; justify-content: center; }
}
.admin-bar { background: var(--accent); color: var(--accent-ink); font-size: .85rem; padding: .4rem var(--gutter); display: flex; gap: 1.2rem; }
.admin-bar a:hover { color: var(--accent-ink); }

/* Hero */
.hero { position: relative; padding-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(80px, 10vw, 140px); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: min(70vw, 900px); aspect-ratio: 1; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(232, 176, 74, .14), rgba(232, 176, 74, 0)); filter: blur(10px); }
.hero-title { margin: 0; font-weight: 400; }
.hero-kicker { margin: 0 0 1.6rem; font: 400 1rem/1.4 var(--sans); letter-spacing: 0; color: var(--fg-2); font-size: 1rem; display: flex; align-items: center; gap: .7rem; }
.hero-kicker::before { content: ""; width: 28px; height: 1px; background: var(--fg-3); }
.hero-name { display: flex; margin: 0; font: 400 clamp(4rem, 15vw, 15.5rem)/.82 var(--serif); letter-spacing: -.045em; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .12em; }
.hero-word-it { font-style: italic; }
.hero-face { display: inline-block; height: .74em; aspect-ratio: 1.45; border-radius: 999px; overflow: hidden; background: var(--surface); transform: translateY(.04em) rotate(-3deg);
  box-shadow: 0 20px 60px -20px rgba(232, 176, 74, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s var(--ease); }
.hero-face:hover { transform: translateY(.04em) rotate(0deg) scale(1.04); }
.hero-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.3); transform-origin: 50% 28%; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 8vw, 8rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
.hero-lede { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; margin: 0; max-width: 42ch; color: var(--fg-2); }
.hero-actions { display: grid; gap: 1.4rem; justify-items: start; }
.status { display: inline-flex; align-items: center; gap: .65rem; font-weight: 500; font-size: .95rem; margin: 0; color: var(--fg); padding: .5rem .9rem .5rem .75rem; border-radius: 999px; background: rgba(127, 207, 154, .08); box-shadow: inset 0 0 0 1px rgba(127, 207, 154, .2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(127, 207, 154, .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(127, 207, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 207, 154, 0); } }
@media (max-width: 760px) { .hero-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .hero-kicker, html:not(.js) .hero-word, html:not(.js) .hero-face, html:not(.js) .hero-row { animation: rise .9s var(--ease) both; }
  html:not(.js) .hero-face { animation-name: grow; animation-delay: .1s; }
  html:not(.js) .hero-row { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
  @keyframes grow { from { opacity: 0; transform: translateY(.04em) rotate(-12deg) scale(.6); } }
}

/* En-têtes */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; }
.page-head { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(40px, 5vw, 72px); }
.crumb { margin: 0 0 1.2rem; color: var(--fg-2); font-size: .95rem; }
.crumb a { text-decoration: none; }

/* Projets : grille asymétrique */
.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 28px); }
.pgrid > .pcard { grid-column: span 4; }
.pgrid > .pcard-big { grid-column: span 8; grid-row: span 2; }
.pgrid > .pcard:nth-child(4) { grid-column: span 5; }
.pgrid > .pcard:nth-child(5) { grid-column: 7 / span 6; margin-top: clamp(0px, 8vw, 120px); }
.pgrid > .pcard:nth-child(6) { grid-column: 2 / span 5; }
.pgrid-all > .pcard, .pgrid-all > .pcard:nth-child(n) { grid-column: span 6; margin-top: 0; }
.pgrid-all > .pcard:nth-child(4n+2), .pgrid-all > .pcard:nth-child(4n+3) { grid-column: span 6; }
.pgrid-all > .pcard:nth-child(even) { margin-top: clamp(0px, 7vw, 100px); }
.pcard { position: relative; text-decoration: none; display: flex; flex-direction: column; gap: 1.1rem; }
.pcard:hover { color: inherit; }
.pcard-media { position: relative; aspect-ratio: 4/3; border-radius: var(--r-m); overflow: hidden; background: var(--surface); isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.pcard-big .pcard-media { aspect-ratio: auto; flex: 1; min-height: 360px; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.04); }
/* Projecteur sous le curseur */
[data-spot] { --mx: 50%; --my: 50%; }
.pcard-media::after, .offer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(232, 176, 74, .16), transparent 60%); }
.pcard:hover .pcard-media::after, .offer:hover::after { opacity: 1; }
/* Couverture absente : titre en grand, sur un faisceau de lumière */
.pcard-mono { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(1.2rem, 3vw, 2.2rem); font: italic 400 clamp(2rem, 4.2vw, 4.4rem)/.95 var(--serif); letter-spacing: -.03em; color: var(--fg); text-wrap: balance; }
.pcard-big .pcard-mono { font-size: clamp(3rem, 7vw, 7.5rem); }
.tone-1 { background: radial-gradient(120% 90% at 85% 0%, rgba(232, 176, 74, .28), transparent 55%), var(--surface); }
.tone-2 { background: radial-gradient(110% 80% at 0% 0%, rgba(140, 160, 210, .22), transparent 55%), var(--surface); }
.tone-3 { background: radial-gradient(90% 90% at 100% 100%, rgba(232, 176, 74, .2), transparent 60%), #1E1C19; }
.tone-4 { background: radial-gradient(100% 70% at 50% 0%, rgba(236, 233, 227, .1), transparent 60%), #17191D; }
.pcard-title { font: 400 clamp(1.6rem, 2.3vw, 2.1rem)/1.05 var(--serif); letter-spacing: -.01em; margin: 0; transition: color .2s; }
.pcard:hover .pcard-title { color: var(--accent); }
.pcard-sub { margin: .35rem 0 0; color: var(--fg-2); max-width: 46ch; }
.pcard-meta { display: flex; justify-content: space-between; gap: 1rem; margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .pgrid > .pcard, .pgrid > .pcard:nth-child(n), .pgrid-all > .pcard:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .pgrid > .pcard-big { grid-column: 1 / -1; grid-row: auto; }
  .pcard-big .pcard-media { aspect-ratio: 16/10; min-height: 0; }
}
@media (max-width: 600px) { .pgrid > .pcard, .pgrid > .pcard:nth-child(n), .pgrid-all > .pcard:nth-child(n) { grid-column: 1 / -1; } }

/* Services : liste typographique */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.services a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 3rem; align-items: baseline; padding: clamp(1.2rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.svc-name { font: 400 clamp(2rem, 4.6vw, 4rem)/1 var(--serif); letter-spacing: -.02em; transition: transform .5s var(--ease), color .2s; }
.svc-desc { color: var(--fg-2); max-width: 44ch; transition: color .2s; }
.services a:hover .svc-name { color: var(--accent); transform: translateX(.3em); font-style: italic; }
.services a:hover .svc-desc { color: var(--fg); }
@media (max-width: 700px) { .services a { grid-template-columns: 1fr; } }

/* Les médias : générique de fin */
.credits { background: var(--bg-2); padding-top: clamp(88px, 11vw, 160px); padding-bottom: clamp(96px, 12vw, 176px); border-block: 1px solid var(--line); }
.credits .h2 { max-width: 16ch; }
.credits-lede { color: var(--fg-2); max-width: 54ch; font-size: 1.15rem; margin: 1.4rem 0 0; }
.credits-list { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; }
.credit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .55fr) minmax(0, 1.1fr); gap: .5rem 2.5rem; align-items: baseline; padding: clamp(1.4rem, 2.5vw, 2.2rem) 0; border-top: 1px solid var(--line); }
.credit:last-child { border-bottom: 1px solid var(--line); }
.credit-name { font: 400 clamp(2.4rem, 6vw, 5.6rem)/.95 var(--serif); letter-spacing: -.035em; text-decoration: none; transition: color .2s, font-style .2s; }
a.credit-name:hover { color: var(--accent); font-style: italic; }
.credit-role { color: var(--accent); font-size: .92rem; font-weight: 500; }
.credit-text { margin: 0; color: var(--fg-2); }
@media (max-width: 860px) { .credit { grid-template-columns: 1fr; } }

/* Freelance */
.freelance-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 8vw, 8rem); align-items: start; }
.freelance-teaser .btn { margin-top: 2.4rem; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 1.3rem 0 1.3rem 4rem; border-top: 1px solid var(--line); color: var(--fg-2); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font: italic 400 1.7rem/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.steps strong { color: var(--fg); font-weight: 500; }
@media (max-width: 860px) { .freelance-teaser { grid-template-columns: 1fr; } }

.offers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.offer { position: relative; grid-column: span 6; background: var(--bg-2); border-radius: var(--r-l); padding: clamp(1.6rem, 3.4vw, 3rem); display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), transform .4s var(--ease); }
.offer:hover { box-shadow: inset 0 0 0 1px rgba(232, 176, 74, .35); }
.offer:nth-child(1) { grid-column: span 7; }
.offer:nth-child(2) { grid-column: span 5; }
.offer:nth-child(3) { grid-column: span 5; }
.offer:nth-child(4) { grid-column: span 7; }
.offer .h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
.offer p { margin: 1rem 0 1.6rem; max-width: 52ch; color: var(--fg-2); }
.ticks { list-style: none; padding: 1.2rem 0 0; margin: auto 0 0; display: grid; gap: .5rem; font-size: .95rem; border-top: 1px solid var(--line); }
.ticks li { display: flex; gap: .75rem; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
@media (max-width: 860px) { .offer, .offer:nth-child(n) { grid-column: 1 / -1; } }

/* Contact */
.contact-band { background: var(--bg-2); padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(88px, 11vw, 150px); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem clamp(2rem, 7vw, 7rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .9rem; font-weight: 500; color: var(--fg-2); margin-bottom: .5rem; }
.opt { font-weight: 400; color: var(--fg-3); }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: .95rem 1rem; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field textarea { resize: vertical; min-height: 10rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #3A3F48; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232, 176, 74, .15); }
.field.check label { display: flex; gap: .75rem; align-items: flex-start; color: var(--fg-2); font-weight: 400; }
.field.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.error { margin: .45rem 0 0; color: var(--danger); font-size: .9rem; }
.error:empty { display: none; }
.has-error input, .has-error textarea { border-color: var(--danger) !important; }
.hp { position: absolute; left: -9999px; }
.form-success { background: var(--bg); border-radius: var(--r-l); padding: 2.2rem; box-shadow: inset 0 0 0 1px rgba(127, 207, 154, .3); }
.form-success p { margin: .7rem 0 0; color: var(--fg-2); }
.form > .btn { justify-self: start; }
.page-head .status { margin-top: 1.8rem; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* Blog */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.bgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
@media (max-width: 900px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bgrid, .bgrid-2 { grid-template-columns: 1fr; } }
.bcard { text-decoration: none; display: block; }
.bcard-media { aspect-ratio: 16/10; border-radius: var(--r-m); overflow: hidden; background: radial-gradient(100% 80% at 100% 0%, rgba(232, 176, 74, .12), transparent 60%), var(--surface); margin-bottom: 1.1rem; }
.bcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bcard:hover .bcard-media img { transform: scale(1.04); }
.bcard-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--fg-3); margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.bcard-meta span { color: var(--accent); }
.bcard-title { font: 400 1.7rem/1.08 var(--serif); letter-spacing: -.01em; margin: 0; transition: color .2s; }
.bcard:hover .bcard-title { color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.4rem; }
.filters a { text-decoration: none; padding: .55rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, box-shadow .2s, background .2s; }
.filters a:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.filters a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: none; }

/* Article / projet */
.post-head { padding-top: clamp(56px, 8vw, 120px); padding-bottom: 2.5rem; max-width: 1080px; }
.post-title { max-width: 20ch; font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.post-meta { display: flex; gap: 1.5rem; color: var(--fg-3); margin: 1.6rem 0 0; font-variant-numeric: tabular-nums; }
.post-cover { max-width: 1180px; margin-block: 0 clamp(2.5rem, 6vw, 5rem); }
.post-cover img, .project-cover img { width: 100%; border-radius: var(--r-l); }
.project-cover { margin: 0 auto clamp(2.5rem, 6vw, 5rem); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 3rem; margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.facts dt { font-size: .85rem; color: var(--fg-3); }
.facts dd { margin: .3rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.prose-wrap { display: flex; justify-content: center; }
.prose { width: 100%; max-width: 66ch; font-size: 1.13rem; line-height: 1.75; color: #D6D3CD; min-width: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font: 400 clamp(2rem, 3.4vw, 2.8rem)/1.05 var(--serif); color: var(--fg); margin-top: 2em; letter-spacing: -.015em; }
.prose h3 { font: 400 1.7rem/1.15 var(--serif); color: var(--fg); margin-top: 1.8em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent); }
.prose img { border-radius: var(--r-m); margin-inline: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: .88rem; color: var(--fg-3); margin-top: .7rem; text-align: center; }
.prose blockquote { margin-inline: 0; padding-left: 1.4rem; border-left: 2px solid var(--accent); font: italic 400 1.7rem/1.3 var(--serif); color: var(--fg); }
.prose iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--r-m); }
.prose pre { background: var(--bg-2); padding: 1.2rem; border-radius: var(--r-m); overflow-x: auto; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(3rem, 6vw, 5rem); }
.gallery figure { margin: 0; }
.gallery figure:nth-child(3n+1) { grid-column: span 2; }
.gallery img { width: 100%; border-radius: var(--r-m); }
.gallery figcaption { font-size: .88rem; color: var(--fg-3); margin-top: .6rem; }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } .gallery figure:nth-child(3n+1) { grid-column: auto; } }
.next-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.next { position: relative; overflow: hidden; text-decoration: none; background: var(--bg-2); border-radius: var(--r-l); padding: clamp(1.6rem, 3.5vw, 3rem); display: grid; gap: .5rem; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.next span { color: var(--fg-3); font-size: .95rem; }
.next strong { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--serif); letter-spacing: -.02em; font-weight: 400; transition: color .2s; }
.next:hover { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(232, 176, 74, .35); }
.next:hover strong { color: var(--accent); font-style: italic; }
@media (max-width: 600px) { .next-row { grid-template-columns: 1fr; } }

/* Outils */
.tools-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 5vw, 4rem); align-items: center; text-decoration: none;
  border-radius: var(--r-l); padding: clamp(1.8rem, 4.5vw, 3.6rem); background: radial-gradient(80% 140% at 0% 50%, rgba(232, 176, 74, .18), transparent 60%), var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s; }
.tools-banner:hover { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(232, 176, 74, .4); }
.tools-count { font: italic 400 clamp(4.5rem, 12vw, 10rem)/.8 var(--serif); letter-spacing: -.05em; color: var(--accent); font-variant-numeric: tabular-nums; }
.tools-text { font-size: 1.05rem; max-width: 48ch; color: var(--fg-2); }
.tools-text strong { display: block; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--serif); color: var(--fg); margin-bottom: .6rem; letter-spacing: -.01em; }
@media (max-width: 560px) { .tools-banner { grid-template-columns: 1fr; } }
/* Page Outils */
.tools-head { padding-bottom: clamp(28px, 3vw, 40px); }
.tools-toolbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); z-index: 10; padding-block: .8rem 0; margin-bottom: 1rem;
  background: linear-gradient(var(--bg) 78%, rgba(15, 16, 19, 0)); }
.tools-search { position: relative; display: flex; align-items: center; max-width: 720px; border-radius: 999px; background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease); }
.tools-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px rgba(232, 176, 74, .12); }
.tools-search svg { position: absolute; left: 1.2rem; color: var(--fg-3); pointer-events: none; }
.tools-search input { flex: 1; min-width: 0; font: inherit; font-size: 1.08rem; padding: 1.1rem 1rem 1.1rem 3.3rem; border: 0; background: none; color: var(--fg); outline: none; }
.tools-search input::placeholder { color: var(--fg-3); }
.tools-search input::-webkit-search-cancel-button { display: none; }
.tools-kbd { margin-right: 1.1rem; font: 500 .8rem var(--sans); color: var(--fg-3); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .5rem; }
.tools-search:focus-within .tools-kbd { display: none; }
.tools-clear { margin-right: .5rem; font: 500 .88rem var(--sans); color: var(--fg-2); background: rgba(255, 255, 255, .06); border: 0; border-radius: 999px; padding: .5rem .9rem; cursor: pointer; }
.tools-clear:hover { color: var(--fg); background: rgba(255, 255, 255, .1); }
.tools-cats { display: flex; gap: .4rem; margin-top: .9rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .9rem; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.tools-cats::-webkit-scrollbar { display: none; }
.chip { flex: none; font: 500 .88rem var(--sans); color: var(--fg-2); background: none; border: 0; border-radius: 999px; padding: .5rem .9rem; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background .2s, box-shadow .2s; }
.chip span { color: var(--fg-3); margin-left: .2rem; font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.chip[aria-pressed="true"] span { color: var(--fg-3); }
.tools-status { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--fg-3); padding-bottom: .4rem; }
.tools { padding-bottom: clamp(80px, 10vw, 140px); }
.tool-cat { padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 230px; }
.tool-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 2rem; align-items: end; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.tool-cat-head .h3 { display: flex; align-items: baseline; gap: .7rem; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.tool-cat-head p { margin: 0; color: var(--fg-2); justify-self: end; text-align: right; max-width: 40ch; }
@media (max-width: 700px) { .tool-cat-head { grid-template-columns: 1fr; } .tool-cat-head p { justify-self: start; text-align: left; } }
.count { font: 400 1rem var(--sans); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2.5vw, 40px); }
.tool a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.1rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; height: 100%; border-radius: 2px; transition: background .2s; }
.tool a:hover { color: var(--fg); background: linear-gradient(90deg, rgba(232, 176, 74, .06), transparent 70%); }
.tool-mark { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  font: italic 400 1.5rem/1 var(--serif); color: var(--accent); transition: transform .3s var(--ease); }
.tool-mark img { width: 100%; height: 100%; object-fit: cover; }
.tool a:hover .tool-mark { transform: rotate(-6deg) scale(1.05); }
.tool-body { display: grid; gap: .2rem; min-width: 0; }
.tool strong { font-weight: 500; transition: color .2s; }
.tool a:hover strong { color: var(--accent); }
.tool-desc { color: var(--fg-2); font-size: .94rem; line-height: 1.45; }
.tool small { color: var(--fg-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool mark { background: rgba(232, 176, 74, .28); color: var(--fg); border-radius: 2px; padding: 0 .05em; }
.tool-list-favs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); margin-top: 1.2rem; }
.tool-list-favs .tool a { grid-template-columns: 1fr; padding: 1.3rem; border: 0; border-radius: var(--r-m); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.tool-list-favs .tool a:hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(232, 176, 74, .4); }
.tool-list-favs .tool-mark { width: 52px; height: 52px; font-size: 1.8rem; margin-bottom: .5rem; }
.tools-empty { padding: 4rem 0; color: var(--fg-2); }
.tools-empty .h3 { color: var(--fg); margin-bottom: .6rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 1000px) { .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool-list-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tool-list { grid-template-columns: 1fr; } .tools-toolbar { top: calc(env(safe-area-inset-top, 0px) + 84px); } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-top: clamp(88px, 11vw, 160px); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: min(110vw, 1400px); aspect-ratio: 2; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 176, 74, .12), transparent); }
.footer-main { position: relative; display: grid; gap: 1.6rem; padding-bottom: clamp(72px, 9vw, 120px); }
.footer-kicker { margin: 0; color: var(--fg-2); font-size: 1.1rem; }
.footer-mail { font: italic 400 clamp(2.4rem, 8.4vw, 8.4rem)/.95 var(--serif); letter-spacing: -.04em; text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
.footer-mail:hover { color: var(--accent); }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; margin-top: .6rem; }
.footer-bottom { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding-block: 1.6rem 2rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--fg-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer-links a { text-decoration: none; color: var(--fg-2); }
.footer-links a:hover { color: var(--accent); }

.notfound { min-height: 55vh; }
.notfound .btn-row { margin-top: 2.4rem; }

/* Réduire les animations : on garde les fondus et changements de couleur, on coupe les mouvements continus */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .marquee-track, .grain, .scroll-cue-line { animation: none !important; } }
.no-cover .pcard-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.no-cover .pcard-sub { margin-top: 0; }
@media (max-width: 600px) { .hero-name { font-size: 25vw; line-height: .9; } .hero-face { height: .7em; } }
.tools-head { padding-top: clamp(40px, 6vw, 88px); }
.tools-head .h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); max-width: 18ch; }
.site-header { background: linear-gradient(var(--bg) 55%, rgba(15, 16, 19, 0)); padding-bottom: .4rem; }
@media (hover: none) { .tools-kbd { display: none; } }
@media (max-width: 600px) {
  .tool-list-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-list-favs .tool a { padding: 1rem; }
  .tool-list-favs .tool-mark { width: 40px; height: 40px; font-size: 1.4rem; }
  .tool-list-favs .tool small { display: none; }
}

/* SEO : surtitres de H1, sommaire, encadré auteur, pagination, zones, FAQ */
.h1-split { display: flex; flex-direction: column; gap: 1.1rem; }
.h1-kicker { font: 400 1rem/1.4 var(--sans); letter-spacing: 0; color: var(--fg-2); display: flex; align-items: center; gap: .7rem; }
.h1-kicker::before { content: ""; width: 28px; height: 1px; background: var(--fg-3); flex: none; }
nav.crumb { font-size: .95rem; }
.lead a, .hero-lede a { color: inherit; text-decoration-color: var(--fg-3); }
.lead a:hover, .hero-lede a:hover { color: var(--accent); }
.toc { margin: 0 0 2.5rem; padding: 1.4rem 1.6rem; border-radius: var(--r-m); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; }
.toc-title { margin: 0 0 .6rem; font: 400 1.4rem/1.1 var(--serif); color: var(--fg); }
.toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.toc a { color: var(--fg-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.prose h2[id] { scroll-margin-top: 110px; }
.author-box { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-top: 3.5rem; padding: 1.4rem; border-radius: var(--r-m); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; line-height: 1.55; }
.author-box img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0; }
.author-box p { margin: 0; color: var(--fg-2); }
.author-box .author-name { font: 400 1.5rem/1.1 var(--serif); color: var(--fg); margin-bottom: .3rem; }
.post-meta { flex-wrap: wrap; gap: .4rem 1.5rem; }
.post-meta a { color: var(--fg-2); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: clamp(64px, 8vw, 112px); color: var(--fg-3); font-size: .95rem; }
.pgrid-3 > .pcard, .pgrid-3 > .pcard:nth-child(n) { grid-column: span 4; margin-top: 0; }
@media (max-width: 900px) { .pgrid-3 > .pcard:nth-child(n) { grid-column: span 6; } }
@media (max-width: 600px) { .pgrid-3 > .pcard:nth-child(n) { grid-column: 1 / -1; } }
.zones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 7vw, 7rem); align-items: start; border-top: 1px solid var(--line); }
.zone-list { list-style: none; margin: 0; padding: 0; }
.zone-list li { display: grid; gap: .2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.zone-list li:first-child { border-top: 1px solid var(--line); }
.zone-list strong { font: 400 1.6rem/1.1 var(--serif); }
.zone-list span { color: var(--fg-2); }
@media (max-width: 860px) { .zones { grid-template-columns: 1fr; } }
.faq-list { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); }
.faq-list > div { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.faq-list dt { font: 400 clamp(1.4rem, 2vw, 1.7rem)/1.15 var(--serif); margin-bottom: .6rem; }
.faq-list dd { margin: 0; color: var(--fg-2); max-width: 58ch; }
@media (max-width: 760px) { .faq-list { grid-template-columns: 1fr; } }

/* =========================================================================
   MISE EN SCÈNE — compte à rebours, faisceau, bobine, générique, curseur
   ========================================================================= */
:root { --z-leader: 90; --z-shutter: 80; --z-cursor: 95; }

/* Compte à rebours façon amorce de film (première visite) */
.leader { position: fixed; inset: 0; z-index: var(--z-leader); display: none; place-items: center; background: #15130F; color: var(--fg);
  clip-path: circle(150% at 50% 50%); cursor: pointer; }
html.is-leader .leader { display: grid; }
html.is-leader body { overflow: hidden; }
.leader-svg { position: absolute; width: min(70vmin, 520px); height: auto; overflow: visible; }
.leader-svg line { stroke: rgba(236, 233, 227, .25); stroke-width: .6; }
.leader-ring { fill: none; stroke: rgba(236, 233, 227, .55); stroke-width: 1.2; }
.leader-ring-2 { stroke: rgba(236, 233, 227, .25); }
.leader-sweep { fill: rgba(232, 176, 74, .22); }
.leader-n { position: relative; font: italic 400 clamp(8rem, 30vmin, 18rem)/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.leader-label { position: absolute; bottom: max(2rem, env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: .85rem; color: var(--fg-3); letter-spacing: .02em; }
.leader::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); animation: flick .12s steps(2) infinite; }
@keyframes flick { 50% { opacity: .35; } }

/* Obturateur : deux volets qui s'ouvrent et se ferment entre les pages */
.shutter { position: fixed; inset: 0; z-index: var(--z-shutter); pointer-events: none; visibility: hidden; }
.shutter span { position: absolute; left: 0; right: 0; height: 50.5%; background: #15130F; }
.shutter span:first-child { top: 0; border-bottom: 1px solid rgba(232, 176, 74, .35); }
.shutter span:last-child { bottom: 0; }
html.is-entering .shutter { visibility: visible; }

/* Curseur (souris uniquement) */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
.cursor-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--fg); mix-blend-mode: difference;
  opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s, background .3s; }
.cursor.on .cursor-dot { opacity: 1; }
.cursor.is-link .cursor-dot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cursor.has-label .cursor-dot { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent); mix-blend-mode: normal; }
.cursor.is-text .cursor-dot, .cursor.is-hidden .cursor-dot { opacity: 0; }
.cursor.down .cursor-dot { transform: scale(.8); }
.cursor-label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 500 .82rem var(--sans); color: var(--accent-ink); opacity: 0; transition: opacity .2s; }
.cursor.has-label .cursor-label { opacity: 1; }

/* Lettres découpées */
.ch { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .16em; margin: 0 -.07em -.16em; }
.ch-in { display: inline-block; will-change: transform; }

/* ---------- Héros ---------- */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: -88px; padding-top: 120px; padding-bottom: 0; overflow: hidden; }
html.has-beam .hero::before { display: none; }
.beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero-inner { position: relative; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-name { display: block; font-size: clamp(4.4rem, 17.5vw, 18.5rem); line-height: .8; letter-spacing: -.05em; }
.hero-line { display: flex; align-items: center; gap: 0 .1em; }
.hero-line-2 { justify-content: flex-end; padding-right: .04em; }
.hero-face { height: .7em; transform: translateY(.03em) rotate(-3deg); }
.hero-row { margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem 1.4rem; border-top: 1px solid rgba(236, 233, 227, .08);
  font-size: .82rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.scroll-cue { display: inline-flex; align-items: center; gap: .8rem; }
.scroll-cue-line { position: relative; width: 48px; height: 1px; background: var(--line); overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 60%, 100% { transform: translateX(100%); } }
.timecode { font-family: var(--sans); letter-spacing: .04em; }
.timecode::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; margin-right: .6rem; vertical-align: 1px; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: .2; } }
@media (max-width: 600px) { .hero-name { font-size: 23vw; } .hero { min-height: auto; padding-top: 140px; } }

/* ---------- Manifeste ---------- */
.manifesto { padding-top: clamp(120px, 16vw, 240px); padding-bottom: clamp(100px, 13vw, 200px); }
.manifesto-text { margin: 0; font: 400 clamp(2rem, 4.6vw, 4.6rem)/1.08 var(--serif); letter-spacing: -.025em; max-width: 22ch; text-indent: 2.2em; text-wrap: pretty; }
.manifesto-text .w { transition: color .3s; }

/* ---------- Bobine ---------- */
.reel { position: relative; padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(40px, 5vw, 70px); background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.reel-head { display: flex; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.reel-head .h2 { flex: 1 1 auto; max-width: none; }
.reel-count { margin: 0; display: flex; align-items: center; gap: .6rem; font: italic 400 1.6rem var(--serif); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.reel-count span:first-child { color: var(--accent); }
.reel-sep { width: 34px; height: 1px; background: var(--fg-3); }
.reel-window { position: relative; }
/* perforations de pellicule */
.reel-window::before, .reel-window::after { content: ""; display: block; height: 14px; margin-inline: var(--gutter);
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(236, 233, 227, .09) 14px 30px); border-radius: 2px; }
.reel-window::before { margin-bottom: 16px; }
.reel-window::after { margin-top: 16px; }
.reel-track { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.frame { position: relative; flex: none; width: clamp(300px, 52vw, 860px); display: flex; flex-direction: column; gap: 1.1rem; text-decoration: none; transform-origin: 50% 100%; }
.frame:hover { color: inherit; }
.frame-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-s); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.frame-img { position: absolute; inset: 0 -9%; }
.frame-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85); }
.frame:hover .frame-img img { transform: scale(1.08); filter: saturate(1.05); }
.frame-mono { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(1.4rem, 3vw, 2.6rem); font: italic 400 clamp(2.6rem, 5.4vw, 6rem)/.92 var(--serif); letter-spacing: -.035em; transition: transform 1s var(--ease); }
.frame:hover .frame-mono { transform: translateX(.15em); }
.frame-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(15,16,19,.45)); opacity: 0; transition: opacity .5s; }
.frame:hover .frame-media::after { opacity: 1; }
.frame-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .2rem 1.2rem; }
.frame-n { font: italic 400 1.2rem var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.frame-title { margin: 0; font: 400 clamp(1.8rem, 2.8vw, 2.8rem)/1 var(--serif); letter-spacing: -.02em; transition: color .3s; }
.frame:hover .frame-title { color: var(--accent); }
.frame-meta { margin: 0; color: var(--fg-3); font-size: .9rem; text-align: right; }
.frame-end { width: clamp(240px, 26vw, 420px); align-self: stretch; justify-content: center; align-items: center; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); aspect-ratio: auto; transition: background .5s; }
.frame-end:hover { background: var(--accent); color: var(--accent-ink); }
.frame-end-txt { font: 400 clamp(2.4rem, 4vw, 4rem)/.95 var(--serif); letter-spacing: -.03em; text-align: center; }
@media (max-width: 899px) {
  .reel-track { width: auto; flex-direction: column; gap: 3rem; }
  .frame { width: 100%; }
  .frame-end { width: 100%; min-height: 180px; }
  .reel-window::before, .reel-window::after { display: none; }
  .reel-count { display: none; }
}

/* ---------- Bandeau ---------- */
.marquee { overflow: hidden; background: var(--accent); color: var(--accent-ink); padding-block: clamp(.9rem, 1.6vw, 1.4rem); transform: rotate(-1.2deg) scale(1.02); margin-block: clamp(3rem, 6vw, 5rem) 0; }
.marquee-track { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); width: max-content; font: italic 400 clamp(1.8rem, 3.6vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.marquee-track i { width: .42em; height: .42em; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); flex: none; }
html:not(.js) .marquee-track, html.reduce .marquee-track { animation: none; }

/* ---------- Générique ---------- */
.credits.is-rolling { padding: 0; }
.credits.is-rolling .credits-stage { position: relative; height: 100vh; overflow: hidden; display: grid; align-content: start; }
.credits.is-rolling .credits-intro { padding-top: clamp(100px, 12vh, 140px); }
.credits.is-rolling .credits-list { position: absolute; left: 0; right: 0; top: 0; margin: 0; text-align: center; }
.credits.is-rolling .credit { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .6rem; border: 0; padding: 6vh var(--gutter); }
.credits.is-rolling .credit:last-child { border: 0; }
.credits.is-rolling .credit-name { font-size: clamp(3.4rem, 9vw, 9rem); }
.credits.is-rolling .credit-text { max-width: 46ch; }
.credits.is-rolling .credits-stage::before, .credits.is-rolling .credits-stage::after { content: ""; position: absolute; left: 0; right: 0; height: 22vh; z-index: 2; pointer-events: none; }
.credits.is-rolling .credits-stage::before { top: 0; background: linear-gradient(var(--bg-2) 35%, rgba(21, 23, 27, 0)); }
.credits.is-rolling .credits-stage::after { bottom: 0; background: linear-gradient(rgba(21, 23, 27, 0), var(--bg-2)); }
.credits.is-rolling .credits-intro { position: relative; z-index: 3; }
.credit-role { order: -1; }

/* ---------- Appel à l'action ---------- */
.cta-block { padding-top: clamp(120px, 15vw, 220px); }
.cta-title { margin: 0 0 clamp(3rem, 6vw, 5rem); font: 400 clamp(3.6rem, 13vw, 14rem)/.85 var(--serif); letter-spacing: -.04em; transform-origin: 0 50%; }
.cta-title em { color: var(--accent); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 8vw, 8rem); align-items: start; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-orb { margin-top: 2.6rem; display: inline-grid; place-items: center; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  text-decoration: none; text-align: center; font: 500 1rem/1.25 var(--sans); transition: background .3s, transform .4s var(--ease); }
.cta-orb:hover { background: var(--fg); color: var(--bg); }
.cta-orb span { pointer-events: none; }

/* Pas de saut au chargement quand les lettres sont masquées */
html.js:not(.reduce) [data-hero] [data-intro] { visibility: hidden; }
@media (max-width: 600px) {
  .frame-info { grid-template-columns: auto minmax(0, 1fr); }
  .frame-meta { grid-column: 2; text-align: left; }
  .credit-name { font-size: clamp(2.6rem, 12vw, 4rem); }
  .cta-title { font-size: 17vw; }
}

/* =========================================================================
   PAGE PROJET — plein écran, fiche « clap », galerie qui s'ouvre, suite
   ========================================================================= */
html.js:not(.reduce) .pj-title, html.js:not(.reduce) [data-pj-intro] { visibility: hidden; }
.expand-clone { overflow: hidden; border-radius: var(--r-s); pointer-events: none; }
.expand-clone img { width: 100%; height: 100%; object-fit: cover; }

.pj-hero { position: relative; isolation: isolate; min-height: 100svh; margin-top: -88px; display: flex; align-items: flex-end; overflow: hidden; background: var(--surface); }
.pj-hero-media { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.pj-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pj-hero-shade { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: linear-gradient(180deg, rgba(15,16,19,.55) 0%, rgba(15,16,19,0) 30%, rgba(15,16,19,.25) 55%, rgba(15,16,19,.92) 100%); }
.pj-hero-inner { padding-bottom: clamp(2.5rem, 6vw, 5rem); padding-top: 140px; }
.pj-hero .crumb { color: rgba(236, 233, 227, .75); }
.pj-scene { display: flex; align-items: center; gap: .7rem; margin: 1.6rem 0 .6rem; font: italic 400 1.3rem var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.pj-scene span { width: 30px; height: 1px; background: currentColor; opacity: .6; }
.pj-title { margin: 0; font: 400 clamp(3.6rem, 13vw, 13.5rem)/.86 var(--serif); letter-spacing: -.045em; max-width: 12ch; text-wrap: balance; }
.pj-sub { margin: 1.4rem 0 0; max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: rgba(236, 233, 227, .82); }

.pj-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 3rem clamp(2rem, 7vw, 7rem); align-items: start;
  padding-top: clamp(80px, 10vw, 150px); padding-bottom: clamp(80px, 10vw, 140px); }
.pj-prose { max-width: 62ch; font-size: clamp(1.15rem, 1.5vw, 1.3rem); }
.pj-prose > p:first-child { font: 400 clamp(1.7rem, 2.6vw, 2.4rem)/1.2 var(--serif); color: var(--fg); letter-spacing: -.01em; }
@media (max-width: 900px) { .pj-body { grid-template-columns: 1fr; } }

/* Fiche façon clap de cinéma */
.slate { position: sticky; top: 110px; background: #1A1C20; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0,0,0,.8); overflow: visible; }
.slate-bar { height: 34px; border-radius: var(--r-s) var(--r-s) 0 0; transform-origin: 0 100%;
  background: repeating-linear-gradient(-45deg, var(--fg) 0 22px, #15130F 22px 44px); box-shadow: 0 2px 0 #15130F; }
.slate-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.slate-grid > div { padding: 1rem 1.2rem 1.1rem; border-top: 1px solid var(--line); }
.slate-grid > div:nth-child(odd):not(.slate-wide) { border-right: 1px solid var(--line); }
.slate-wide { grid-column: 1 / -1; }
.slate-grid dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.slate-grid dd { margin: .35rem 0 0; font: 400 1.35rem/1.15 var(--serif); overflow-wrap: anywhere; }
.slate-grid dd a { color: var(--accent); text-decoration: none; }
.slate-grid dd a:hover { text-decoration: underline; }
@media (max-width: 900px) { .slate { position: relative; top: 0; } }

/* Galerie */
.pj-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); padding-bottom: clamp(80px, 10vw, 140px); }
.pj-shot { margin: 0; }
.pj-shot-0 { grid-column: 1 / -1; }
.pj-shot-1 { grid-column: 1 / span 7; }
.pj-shot-2 { grid-column: 8 / span 5; margin-top: clamp(0px, 12vw, 180px); }
.pj-shot-frame { overflow: hidden; border-radius: 10px; }
.pj-shot-frame img { width: 100%; height: auto; display: block; transform-origin: 50% 50%; }
.pj-shot figcaption { margin-top: .7rem; font-size: .88rem; color: var(--fg-3); }
@media (max-width: 760px) { .pj-shot-1, .pj-shot-2 { grid-column: 1 / -1; margin-top: 0; } }

/* Projet suivant */
.pj-next { padding-inline: var(--gutter); }
.pj-next-link { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(420px, 80vh, 820px);
  padding: clamp(1.6rem, 4vw, 3.5rem); border-radius: var(--r-m); overflow: hidden; text-decoration: none; background: var(--surface); }
.pj-next-link:hover { color: var(--fg); }
.pj-next-media { position: absolute; inset: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; }
.pj-next-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.55); transition: filter .8s var(--ease); }
.pj-next-link:hover .pj-next-media img { filter: grayscale(0) brightness(.75); }
.pj-next-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,16,19,0) 40%, rgba(15,16,19,.85)); }
.pj-next-label { display: flex; align-items: center; gap: .8rem; color: var(--accent); font-size: .95rem; }
.pj-next-label::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.pj-next-title { margin: .8rem 0 0; font: italic 400 clamp(3.4rem, 11vw, 11rem)/.88 var(--serif); letter-spacing: -.045em; transition: transform .8s var(--ease); }
.pj-next-link:hover .pj-next-title { transform: translateX(.08em); }
.pj-next-sub { margin: 1rem 0 0; color: rgba(236, 233, 227, .75); max-width: 50ch; }

/* Toute la bobine */
.pj-more { padding-top: clamp(80px, 10vw, 140px); }
.pj-more-title { margin: 0 0 1.4rem; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 var(--serif); letter-spacing: -.02em; }
.pj-more-list { list-style: none; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; border-top: 1px solid var(--line); }
.pj-more-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: .3rem 2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.pj-more-name { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.05 var(--serif); transition: color .2s, transform .5s var(--ease); }
.pj-more-list a:hover .pj-more-name { color: var(--accent); transform: translateX(.25em); font-style: italic; }
.pj-more-meta { color: var(--fg-3); font-size: .95rem; }
.pj-more-year { color: var(--fg-3); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .pj-more-list a { grid-template-columns: 1fr auto; } .pj-more-meta { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- À propos ---------- */
.eyebrow { font: 500 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.4rem; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(40px, 6vw, 90px); }
.about-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 8.4vw, 8.4rem); line-height: .92; letter-spacing: -.03em; margin: 0; }
.about-title em { display: block; color: var(--accent); }
.about-facts { margin: clamp(2rem, 4vw, 3.4rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.about-facts > div { padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--line); }
.about-facts dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.about-facts dd { margin: .35rem 0 0; color: var(--fg); }
.about-portrait { margin: 0; position: relative; }
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-s); filter: grayscale(.25) contrast(1.05); }
.about-portrait figcaption { font-size: .8rem; color: var(--fg-3); margin-top: .7rem; font-variant-numeric: tabular-nums; }
.about-intro { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); }
.about-prose { grid-column: 2; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.6; }
.about-prose p:first-child { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; color: var(--fg); }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem 2.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); transition: background .3s var(--ease); }
.tl-row:hover { background: linear-gradient(90deg, rgba(232,176,74,.06), transparent 60%); }
.tl-when { font-size: .85rem; color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; padding-top: .45rem; }
.tl-role { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.05; margin: 0; }
.tl-org { margin: .45rem 0 0; color: var(--accent); }
.tl-org span { color: var(--fg-3); margin-left: .6rem; }
.tl-org span::before { content: "·"; margin-right: .6rem; }
.tl-desc { margin: .4rem 0 0; color: var(--fg-2); line-height: 1.6; }
.about-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem); }
.about-two .h2 { margin-bottom: 2rem; }
.school-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.school-list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.school-list .tl-when { grid-row: span 2; padding-top: .15rem; }
.school-list .muted { color: var(--fg-3); font-size: .92rem; }
.skill-group + .skill-group { margin-top: 1.8rem; }
.skill-title { font: 500 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .9rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 99px; font-size: .92rem; color: var(--fg); transition: border-color .2s, color .2s; }
.chips li:hover { border-color: var(--accent); color: var(--accent); }
.side-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.side-list a { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--bg); text-decoration: none; height: 100%; transition: background .3s var(--ease); }
.side-list a:hover { background: var(--bg-2); color: inherit; }
.side-name { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.side-list a:hover .side-name { color: var(--accent); }
.side-role { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.side-text { color: var(--fg-2); }
.about-cta { text-align: left; }
.about-cta .btn-row { margin-top: 1.6rem; }
@media (max-width: 900px) {
  .about-hero, .about-intro, .about-two { grid-template-columns: 1fr; }
  .about-portrait { max-width: 280px; order: -1; }
  .about-prose { grid-column: 1; }
  .tl-row { grid-template-columns: 1fr; gap: .3rem; }
  .tl-when { padding-top: 0; }
  .side-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .about-facts { grid-template-columns: 1fr; } .school-list li { grid-template-columns: 1fr; } .school-list .tl-when { grid-row: auto; } }

/* ---------- Musique ---------- */
.music-intro { margin-top: 1.8rem; color: var(--fg-2); }
.music-head .btn-row { margin-top: 1.8rem; }
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: t; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
.track-play { all: unset; cursor: pointer; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3rem; align-items: center; gap: 1rem; padding: 1.3rem 0; }
.track-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.track-n { font-size: .85rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.track-title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; transition: color .25s var(--ease), transform .45s var(--ease); }
.track-play:hover .track-title, .track.is-open .track-title { color: var(--accent); transform: translateX(.4rem); }
.track-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .25s, border-color .25s; }
.track-icon::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .42rem 0 .42rem .7rem; border-color: transparent transparent transparent var(--fg); }
.track-play:hover .track-icon { background: var(--accent); border-color: var(--accent); }
.track-play:hover .track-icon::after { border-left-color: var(--accent-ink); }
.track.is-open .track-icon::after { width: .7rem; height: .8rem; border: 0; border-left: 3px solid var(--fg); border-right: 3px solid var(--fg); left: 50%; }
.track-link { font-size: .8rem; color: var(--fg-3); padding-left: 1rem; }
.track-player { grid-column: 1 / -1; }
.track-player iframe { display: block; width: 100%; height: 166px; border: 0; margin-bottom: 1.3rem; border-radius: var(--r-s); }
.music-note { margin-top: 1.4rem; color: var(--fg-3); font-size: .85rem; }
@media (max-width: 600px) { .track-play { grid-template-columns: 2.2rem minmax(0, 1fr) 2.6rem; } .track-link { display: none; } }

/* ---------- À propos : scène avec photo détourée ---------- */
.ab-stage { position: relative; height: min(100svh, 1000px); min-height: 560px; overflow: hidden; isolation: isolate; margin-top: -96px; }
.ab-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 50% 44%, rgba(232,176,74,.30), rgba(232,176,74,.08) 55%, transparent 75%),
    radial-gradient(60% 40% at 50% 100%, rgba(232,176,74,.10), transparent 70%); }
.ab-glow::after { content: ""; position: absolute; left: 50%; top: -10%; width: 70%; height: 80%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(232,176,74,.10) 175deg, rgba(232,176,74,.16) 180deg, rgba(232,176,74,.10) 185deg, transparent 200deg); filter: blur(18px); }
.ab-name { position: absolute; inset: 0; z-index: 1; margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 6vh var(--gutter) 0;
  font: 400 clamp(5.5rem, 21vw, 23rem)/.8 var(--serif); letter-spacing: -.045em; color: var(--fg); pointer-events: none; }
.ab-name span.ab-l1 { align-self: flex-start; }
.ab-name span.ab-l2 { align-self: flex-end; font-style: italic; color: var(--accent); padding-right: .04em; }
.ab-name-ghost { z-index: 3; color: transparent; -webkit-text-stroke: 1px rgba(236,233,227,.28); }
.ab-name-ghost span.ab-l2 { color: transparent; -webkit-text-stroke: 1px rgba(232,176,74,.45); }
.ab-cut { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 88%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(232,176,74,.5)) drop-shadow(0 -8px 40px rgba(232,176,74,.2)); }
.ab-cut img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: contrast(1.04);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
.ab-meta { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); display: flex; justify-content: space-between; align-items: flex-end; }
.ab-meta .eyebrow { margin: 0; }
.ab-meta-r { font-size: .8rem; line-height: 1.5; color: var(--fg-2); text-align: right; letter-spacing: .04em; }
.ab-under { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.ab-tagline { margin: 0; font: 400 clamp(2.6rem, 6vw, 5.6rem)/.95 var(--serif); letter-spacing: -.03em; }
.ab-tagline em { display: block; color: var(--accent); }
.ab-facts { margin: 0; }
@media (max-width: 900px) {
  .ab-stage { height: min(92svh, 760px); margin-top: -84px; }
  .ab-name { justify-content: flex-start; padding-top: 16vh; font-size: 27vw; }
  .ab-cut { height: 70%; }
  .ab-under { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ab-cut { height: 64%; } .ab-meta-r { display: none; } }
.ab-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(15,16,19,0), var(--bg)); }

/* ---------- Accueil : l'objectif (remplace la photo) ---------- */
.hero-lens { aspect-ratio: 1; height: .86em; border-radius: 50%; overflow: visible; background: none; box-shadow: none; cursor: pointer; position: relative; }
.hero-lens::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,176,74,calc(.18 + var(--lens-open, .5) * .35)), transparent); filter: blur(6px); transition: opacity .3s; }
.hero-lens svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lens-barrel { fill: #16181C; stroke: rgba(236,233,227,.14); stroke-width: .6; }
.lens-ticks line { stroke: rgba(236,233,227,.32); stroke-width: .55; stroke-linecap: round; }
.lens-ticks { transform-origin: 0 0; }
.lens-rim { fill: none; stroke: rgba(0,0,0,.7); stroke-width: 1.4; }
.lens-blade { stroke: rgba(236,233,227,.13); stroke-width: .45; stroke-linejoin: round; }
.lens-spill { mix-blend-mode: screen; }
.lens-glint { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.3; stroke-linecap: round; opacity: .7; }
.lens-glint-2 { opacity: .3; }
.hero-face.hero-lens:hover { transform: translateY(.03em) rotate(0deg) scale(1.05); }
@media (max-width: 600px) { .hero-lens { height: .8em; } }

/* ---------- Sans animations (« réduire les animations » ou sans JS) : mises en page fixes soignées ---------- */
@media (min-width: 900px) {
  html.reduce .reel-track, html:not(.js) .reel-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 28px); }
  html.reduce .frame, html:not(.js) .frame { width: auto; }
  html.reduce .frame-end, html:not(.js) .frame-end { grid-column: 1 / -1; width: auto; min-height: 160px; }
  html.reduce .frame-img, html:not(.js) .frame-img { inset: 0; }
  html.reduce .reel-count, html:not(.js) .reel-count { display: none; }
}
.credits:not(.is-rolling) .credits-list { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
.credits:not(.is-rolling) .credit { grid-template-columns: minmax(0, .5fr) minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 860px) { .credits:not(.is-rolling) .credit { grid-template-columns: 1fr; } }

/* Page Outils : sur grand écran, toutes les catégories visibles (retour à la ligne) ; défilement horizontal seulement sur mobile */
@media (min-width: 760px) {
  .tools-cats { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; padding-bottom: .4rem; }
}