/* style.css — site portfolio (inspiration index.studio)
   Tokens : assets/css/tokens.css — Spec : docs/STYLEGUIDE.md */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { font-size: 100.01%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-book);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--color-text-strong); outline-offset: 3px; }
.visuallyhidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; padding: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: var(--z-launcher);
  background: var(--color-text-strong); color: var(--color-text-inverse);
  padding: 8px 14px; font-size: var(--text-ui);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-primary);
}
.skip-link:focus-visible { transform: none; }
.gwrapper { max-width: var(--container-max); width: var(--container-width); margin: 0 auto; }

/* ---------- progress (scroll) ---------- */
.main-progress {
  position: fixed; top: 0; left: 0; right: 0; height: var(--progress-height);
  background: var(--color-bg-inverse); transform-origin: left; transform: scaleX(0);
  z-index: var(--z-progress);
}

/* ---------- logo ---------- */
.logo-index {
  position: fixed; top: 24px; left: 30px; z-index: calc(var(--z-landing) - 1);
  font-size: var(--text-ui);
  mix-blend-mode: difference; color: #fff;
  transition: opacity var(--duration-fast) var(--ease-primary);
}
.logo-index:hover { opacity: .6; }

/* ---------- nav texte (desktop, haut droite) ---------- */
.top-nav {
  position: fixed; top: 22px; right: 2vw; z-index: calc(var(--z-landing) - 1);
}
.top-nav__menu { display: flex; gap: 28px; }
.top-nav__menu a {
  position: relative; display: inline-block;
  font-size: var(--text-ui); color: var(--color-text-muted);
  padding: 4px 0;
  transition: color var(--duration-fast) var(--ease-primary);
}
.top-nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-text-strong);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--duration-base) var(--ease-primary);
}
.top-nav__menu a:hover { color: var(--color-text); }
.top-nav__menu a:hover::after,
.top-nav__menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.top-nav__menu a[aria-current] { color: var(--color-text); }
.top-nav__menu a[aria-current]::after { transform: scaleX(1); }

/* ---------- menu mobile ---------- */
.btn-menu { position: fixed; top: 20px; right: 24px; z-index: calc(var(--z-launcher) + 1); width: 40px; height: 40px; }
.btn-menu .shape { position: absolute; inset: 0; display: block; }
.btn-menu .shape span {
  position: absolute; left: 8px; right: 8px; height: 2px; background: currentColor; display: block;
  top: 16px; transition: transform var(--duration-base) var(--ease-secondary);
}
.btn-menu .shape span:last-child { top: 22px; }
.btn-menu:hover .shape span:last-child { transform: translateY(-3px); }
.btn-menu.is-open { color: #fff; }
.btn-menu.is-open .shape span:first-child { transform: translateY(3px) rotate(45deg); }
.btn-menu.is-open .shape span:last-child { transform: translateY(0) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: var(--z-launcher);
  background: var(--color-bg-inverse); color: var(--color-text-inverse);
  padding: 0 8vw; visibility: hidden; opacity: 0;
  transition: opacity var(--duration-base) var(--ease-inout), visibility 0s var(--duration-base);
  display: flex; flex-direction: column; justify-content: center;
}
.menu-overlay[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--duration-base) var(--ease-inout);
}
.menu-overlay__primary li { padding: 6px 0; }
.menu-overlay__primary a {
  font-size: var(--nav-overlay-size); font-weight: var(--font-weight-light);
  transition: opacity var(--duration-fast) var(--ease-primary);
}
.menu-overlay__primary a:hover { opacity: .6; }
.menu-overlay__socials { margin-top: 8vh; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.menu-overlay__socials a { font-size: var(--text-ui); color: var(--color-overlay); }
.menu-overlay__socials a:hover { color: var(--color-text-inverse); }

/* ---------- transition de page (barba — fade noir + sweep barre) ---------- */
.page-transition {
  position: fixed; inset: 0; z-index: var(--z-transition);
  background: var(--color-bg-inverse);
  opacity: 0; pointer-events: none; will-change: opacity;
  display: flex; align-items: center; justify-content: center;
}
.page-transition.is-in { opacity: 1; transition: opacity 1.2s cubic-bezier(.19, 1, .22, 1); }
.page-transition.is-out { opacity: 0; transition: opacity 1.1s var(--ease-inout); }
.page-transition.hard-reset { opacity: 0; transition: none; }

/* titre de l'item, centré, slide-up — co-fade avec le voile (multiplié par l'opacité du panel) */
.page-transition__title {
  opacity: 0; transform: translateY(24px); filter: blur(0);
  color: var(--color-text-inverse);
  font-size: var(--text-display); line-height: var(--line-display);
  font-weight: var(--font-weight-light);
  text-align: center; max-width: 11em; padding: 0 6vw;
}
.page-transition.is-in .page-transition__title {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease-primary) .3s, transform .45s var(--ease-primary) .3s;
}
.page-transition.is-out .page-transition__title {
  opacity: 0; transform: translateY(-48px); filter: blur(14px);
  transition: opacity .5s var(--ease-primary), transform .6s var(--ease-primary), filter .5s var(--ease-primary);
}

/* la barre de progression sert aussi de loader de transition (blanche pendant le sweep) */
.main-progress.run { transform: scaleX(1); transition: transform 1s var(--ease-inout); background: var(--color-bg); }
.main-progress.hard-reset { transform: scaleX(0); transition: none; }

/* ---------- hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 16vh 0 20vh; }
.hero__title { font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--font-weight-light); max-width: 11em; }
.hero__intro {
  margin-top: 42px; max-width: 480px;
  font-size: var(--text-intro); line-height: var(--line-intro);
  color: var(--color-text-strong); font-weight: var(--font-weight-light);
}
.hero__intro code { font-family: var(--font-sans); font-size: var(--text-caption); color: var(--color-text-muted); }
.hero__cta { margin-top: 48px; }
.hero__cta a {
  font-size: var(--text-ui); color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-primary);
}
.hero__cta a:hover { color: var(--color-text); }

/* ---------- work ---------- */
.workspace { padding-bottom: 0; }
.breadcrumb { margin: 12vh 0 0; }
.breadcrumb ol { display: inline-flex; gap: 8px; }
.breadcrumb li { font-size: var(--text-ui); color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-text); }

.toolbar { margin-top: 6vh; display: flex; align-items: center; gap: 32px; }
.btn-switch { position: relative; display: inline-flex; align-items: center; font-size: var(--text-ui); }
.btn-switch .text { padding: 6px 0; color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-primary); }
.btn-switch .state {
  position: absolute; bottom: 0; left: 0; width: 50%; height: 1px;
  background: var(--color-text-strong);
  transition: transform var(--duration-base) var(--ease-primary);
}
.btn-switch[aria-pressed="true"] .state { transform: translateX(100%); }
.btn-switch .text.is-active { color: var(--color-text); }

.workspace__introduction {
  margin: 6vh 0 var(--beat-bottom);
  font-size: var(--text-intro); line-height: var(--line-intro);
  font-weight: var(--font-weight-light);
  color: var(--color-text-strong); text-align: right;
  max-width: 480px; margin-left: auto;
}
.workspace__introduction sup { font-size: var(--text-micro); }

/* grille — 2 colonnes 40% + décalage éditorial, comme index.studio */
.collection { display: flex; flex-wrap: wrap; justify-content: space-between; }
.collection .cell { width: 40%; }
.collection .cell:first-child .grid-item:nth-child(2n) { left: 20%; }
.collection .cell:nth-child(2) { margin-top: 105px; }
.grid-item { position: relative; display: block; width: 100%; margin-bottom: var(--rhythm-item); }
.grid-item .visual {
  position: relative; margin-bottom: var(--visual-gap);
  overflow: hidden; background: var(--color-surface);
}
.grid-item img { width: 100%; height: auto; transition: opacity var(--duration-slow) var(--ease-primary), filter var(--duration-slow) var(--ease-primary); }
.grid-item:hover img { filter: grayscale(1); }
.grid-item.is-broken .visual { background: linear-gradient(120deg, var(--color-surface), var(--color-border)); }
.grid-item.is-broken img { display: none; }
.grid-item h3 { font-size: var(--text-h4); font-weight: var(--font-weight-medium); }
.grid-item .cats { font-size: var(--text-h5); line-height: var(--line-h5); color: var(--color-text-muted); margin-top: 4px; }

/* list view */
.list-view {
  display: none; background: var(--color-bg-inverse); color: #fff;
  padding: 10vh 0 20vh;
}
.workspace.is-list .list-view { display: block; }
.workspace.is-list .collection { display: none; }
.list-row {
  display: flex; align-items: baseline; position: relative;
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--color-overlay-10);
  cursor: default;
}
.list-row .row-link { display: flex; align-items: baseline; width: 100%; position: relative; }
.list-row .title { width: var(--list-col); font-size: var(--text-list); color: #fff; mix-blend-mode: difference; }
.list-row .cats { width: var(--list-col); font-size: var(--text-list); color: var(--color-overlay); }
.list-row .date { font-size: var(--text-list); color: var(--color-overlay); }
.list-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff;
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-primary);
}
.list-row:hover::after { opacity: 1; }

/* preview suivant le curseur */
.list-preview {
  position: fixed; left: 0; top: 0; width: var(--preview-width); aspect-ratio: 16 / 10;
  z-index: var(--z-content); pointer-events: none; visibility: hidden; overflow: hidden;
  transform: translate(calc(-100% + 32px), -50%);
  opacity: 0;
  transition: visibility 0s var(--duration-base), opacity var(--duration-base) var(--ease-primary);
}
.list-preview img { width: 100%; height: 100%; object-fit: cover; }
.list-preview.is-active {
  visibility: visible; opacity: 1;
  transition: visibility 0s, opacity var(--duration-base) var(--ease-primary);
}

/* ---------- page projet (article) ---------- */
.single { padding: 12vh 0 0; }
.single__head { margin: 10vh 0 6vh; }
.single__head h1 { font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--font-weight-light); }
.single__meta { margin-top: 8px; font-size: var(--text-ui); color: var(--color-text-muted); }
.single__visual { margin: 0; background: var(--color-surface); }
.single__visual img { width: 100%; height: auto; }
.single__body { margin: 8vh auto 0; max-width: 480px; font-size: var(--text-body); line-height: var(--line-body); color: var(--color-text-strong); }
.single__body p + p { margin-top: 1em; }
.single__detail { margin: 12vh 0 0; }
.detail__item { display: flex; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.detail__item h6 { width: 50%; font-size: var(--text-caption); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); }
.detail__item p { width: 50%; font-size: var(--text-body); color: var(--color-text-strong); }
.single-next { display: block; margin: 18vh 0 4vh; padding-top: 8vh; border-top: 1px solid var(--color-border); }
.single-next .label { display: block; font-size: var(--text-ui); color: var(--color-text-muted); margin-bottom: 10px; }
.single-next .big { font-size: var(--text-h2); font-weight: var(--font-weight-medium); transition: color var(--duration-fast) var(--ease-primary); }
.single-next:hover .big { color: var(--color-hover); }

/* ---------- contact ---------- */
.contact { padding: 20vh 0 10vh; }
.contact__title { font-size: var(--text-h2); font-weight: var(--font-weight-light); margin-top: 10vh; }
.contact__email {
  display: inline-block; margin-top: 6vh;
  font-size: var(--text-display); font-weight: var(--font-weight-light);
  transition: opacity var(--duration-fast) var(--ease-primary);
}
@media (max-width: 767px) { .contact__email { font-size: var(--text-h3); word-break: break-all; } }
.contact__email:hover { opacity: .6; }
.contact__socials { margin-top: 8vh; display: flex; flex-wrap: wrap; gap: 18px 32px; }
.contact__socials a {
  font-size: var(--text-ui); color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-primary);
}
.contact__socials a:hover { color: var(--color-text); }

/* ---------- footer ---------- */
.site-footer { padding: 12vh 0 8vh; }
.site-footer p { font-size: var(--text-ui); color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-text); }

/* ---------- reveals ---------- */
.reveal {
  opacity: 0; transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal) var(--ease-primary), transform var(--duration-reveal) var(--ease-primary);
}
.reveal.is-in { opacity: 1; transform: none; }

/* découverte Lenis (snippets officiels) — overflow retiré de .lenis-stopped :
   la scrollbar reste visible en permanence (anti-saut via scrollbar-gutter) ; le stop() JS bloque déjà la molette */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }


.wp-site-blocks :focus {
    outline: none !important;
}
/* ---------- adaptatif ---------- */
@media (max-width: 767px) {
  .top-nav { display: none; }
  .hero { padding-top: 25vh; min-height: auto; }
  .collection .cell { width: 45%; }
  .workspace__introduction { text-align: left; margin-left: 0; margin-top: 4vh; }
  .list-row .row-link { flex-wrap: wrap; }
  .list-row .title { width: 60%; }
  .list-row .cats { width: 40%; }
  .list-row .date { width: 100%; }
}

@media (min-width: 768px) {
  .btn-menu, .menu-overlay { display: none; }
}