/* ============================================
   REZONN — Design tokens
   ============================================ */
:root{
  --bg: #17181a;
  --bg-elevated: #1e1f22;
  --bg-elevated-2: #26282b;
  --fg: #ece8e1;
  --fg-muted: #aeb0b4;
  --fg-faint: #86888c;
  --line: #333438;
  --accent: #8000e3;
  --accent-dim: #52009a;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --header-h: 84px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; background:none; border:none; color: inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

::selection{ background: var(--accent); color: var(--fg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================
   Grain overlay — texture argentique subtile
   ============================================ */
.grain{
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 9998;
  opacity: 0.035;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================
   Loader
   ============================================ */
.loader{
  position: fixed; inset:0;
  z-index: 9999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 10vw, 96px);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%, 100%{ color: var(--fg-faint); opacity: .55; }
  50%{ color: var(--fg); opacity: 1; }
}
.loader-bar{
  width: 180px; height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader-bar-fill{
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: loaderGrow 1.6s ease-in-out forwards;
}
@keyframes loaderGrow{
  0%{ width:0%; }
  100%{ width:100%; }
}

/* ============================================
   Header / Nav
   ============================================ */
.site-header{
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  display:flex; align-items:center; justify-content: space-between;
  padding: 0 28px;
  z-index: 900;
  background: rgba(23,24,26,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wordmark{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.06em;
  display:flex; align-items:baseline; gap:10px;
}
.logo{ height: 26px; width: auto; display:block; }
.loader-logo{ width: clamp(160px, 28vw, 320px); height:auto; animation: loaderPulse 1.4s ease-in-out infinite; }
.hero-logo{ width: min(70vw, 720px); height:auto; display:block; margin: 0 auto; }
.wordmark-note{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.9;
  text-transform: uppercase;
}
.menu-toggle{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  border: 1px solid var(--line);
  padding: 9px 18px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.menu-toggle:hover{ border-color: var(--accent); color: var(--accent); }

/* ============================================
   Menu plein écran — photo par catégorie
   Occupe tout le viewport, sans défilement, sous le header flouté
   ============================================ */
.menu-overlay{
  position: fixed; inset:0;
  z-index: 700;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  overflow: hidden;
  will-change: opacity;
}
.menu-overlay.is-open{
  visibility: visible;
  opacity: 1;
}

.menu-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  padding-top: calc(var(--header-h) + 3px);
  height: 100vh;
}

/* les photos des tuiles du menu restent masquées par défaut sur PC,
   et n'apparaissent qu'au survol — toujours visibles sur mobile (cf. media query plus bas) */
#menuGrid .cat-tile .ph,
#menuGrid .cat-tile .shot-img{
  opacity: 0;
  transition: opacity 0.15s ease-out;
  will-change: opacity;
  transform: translateZ(0);
}
#menuGrid .cat-tile:hover .ph,
#menuGrid .cat-tile:hover .shot-img{
  opacity: 1;
}
#menuGrid .cat-tile::after{
  /* voile sombre pour garder le label lisible même si l'image apparaît */
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%);
  z-index:1;
  opacity:0;
  transition: opacity 0.15s ease-out;
}
#menuGrid .cat-tile:hover::after{ opacity: 1; }

#menuGrid .cat-tile.is-active .cat-tile-label{ color: var(--accent); }

@media (max-width: 760px){
  .menu-grid{ grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4, 1fr); }
  #menuGrid .cat-tile .ph,
  #menuGrid .cat-tile .shot-img{ opacity: 1 !important; }
  #menuGrid .cat-tile::after{ opacity: 0.75 !important; }
}

/* ============================================
   Layout shell
   ============================================ */
#app{
  min-height: 100vh;
  padding-top: var(--header-h);
}
.view{
  animation: viewIn 0.5s ease both;
}
@keyframes viewIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ============================================
   Hero (home)
   ============================================ */
.hero{
  min-height: calc(100vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 40px 20px 130px; /* réserve la place du bouton DÉFILER, jamais de chevauchement */
  position: relative;
}
.hero-word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(72px, 16vw, 220px);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.hero-note{
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.hero-tagline{
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.hero-scroll{
  position:absolute; bottom: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.2em;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor: pointer;
  background:none; border:none;
  transition: color 0.25s ease;
}
.hero-scroll:hover{ color: var(--fg); }
.hero-scroll::after{
  content:'';
  width:1px; height: 34px;
  background: var(--fg-faint);
  animation: scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   Category grid (home) — non-aligné, portrait/paysage
   ============================================ */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 12vw;
  gap: 3px;
  padding: 3px;
}
.cat-tile{
  position: relative;
  overflow:hidden;
  contain: layout paint;
  display:flex; align-items:flex-end;
  padding: 20px;
  cursor:pointer;
}
.cat-tile-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: 0.04em;
  color: var(--fg);
  z-index:2;
  transition: color 0.12s ease, transform 0.15s ease;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 1.05;
}
.cat-tile-soon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 40px);
  letter-spacing: 0.18em;
  color: var(--fg-muted);
  z-index:2;
  pointer-events:none;
}
.soon-view{
  min-height: calc(100vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px; text-align:center; padding: 40px 20px;
}
.soon-word{
  margin:0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 48px);
  letter-spacing: 0.22em;
  color: var(--fg-muted);
}
.cat-tile:hover .cat-tile-label{ color: var(--accent); transform: translateX(4px); }
.cat-tile:hover .ph::before{ transform: scale(1.06); }

/* placement asymétrique — 7 tuiles, CONTACT la plus petite */
.cat-tile.c-events{ grid-column: 1 / 4; grid-row: 1 / 3; }
.cat-tile.c-shooting{ grid-column: 4 / 6; grid-row: 1 / 2; }
.cat-tile.c-performances{ grid-column: 6 / 7; grid-row: 1 / 3; }
.cat-tile.c-animal{ grid-column: 4 / 6; grid-row: 2 / 3; }
.cat-tile.c-prints{ grid-column: 1 / 3; grid-row: 3 / 4; }
.cat-tile.c-archives{ grid-column: 3 / 6; grid-row: 3 / 4; }
.cat-tile.c-contact{ grid-column: 6 / 7; grid-row: 3 / 4; }

@media (max-width: 760px){
  .cat-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 42vw; }
  .cat-tile.c-events{ grid-column: 1/3; grid-row: 1/2; }
  .cat-tile.c-shooting{ grid-column: 1/2; grid-row: 2/3; }
  .cat-tile.c-performances{ grid-column: 2/3; grid-row: 2/3; }
  .cat-tile.c-animal{ grid-column: 1/2; grid-row: 3/4; }
  .cat-tile.c-prints{ grid-column: 2/3; grid-row: 3/4; }
  .cat-tile.c-archives{ grid-column: 1/2; grid-row: 4/5; }
  .cat-tile.c-contact{ grid-column: 2/3; grid-row: 4/5; }
}

/* ============================================
   Placeholders photographiques (grain + dégradé par catégorie)
   ============================================ */
.ph{
  position:absolute; inset:0;
  background: var(--bg-elevated);
  z-index:1;
}
.ph::before{
  content:'';
  position:absolute; inset:0;
  transition: transform 0.35s ease-out;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"),
    linear-gradient(155deg, var(--g1), var(--g2) 55%, var(--g3));
  background-size: 140px 140px, cover;
}
.ph::after{
  content: attr(data-frame);
  position:absolute; bottom:10px; left:12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(236,232,225,0.6);
  z-index:2;
  letter-spacing: 0.05em;
}
.ph.tone-events{ --g1:#232025; --g2:#2c2530; --g3:#18171a; }
.ph.tone-shooting{ --g1:#202124; --g2:#2a2b2f; --g3:#17181a; }
.ph.tone-performances{ --g1:#241f28; --g2:#2e2434; --g3:#19161c; }
.ph.tone-animal{ --g1:#1d2320; --g2:#242e28; --g3:#161a18; }
.ph.tone-prints{ --g1:#2a2620; --g2:#332c22; --g3:#1a1712; }
.ph.tone-archives{ --g1:#1c2126; --g2:#232b32; --g3:#15181b; }
.ph.tone-contact{ --g1:#201f22; --g2:#28262b; --g3:#161617; }

/* Vraies photos (issues de /photos via manifest.json) */
.shot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: var(--focus, center);
  z-index:1;
  display:block;
}

/* Réglage du cadrage par tuile — augmente le 2e pourcentage pour "descendre"
   la fenêtre visible dans la photo (montrer plus du bas du sujet). 0% = haut
   de la photo, 100% = bas de la photo. À ajuster tuile par tuile si besoin. */
.cat-tile.c-events{ --focus: center 29%; }
.cat-tile.c-shooting{ --focus: center 22%; }
.cat-tile.c-performances{ --focus: center 50%; }
.cat-tile.c-animal{ --focus: center 30%; }
.cat-tile.c-prints{ --focus: center 50%; }
.cat-tile.c-archives{ --focus: center 24%; }
.cat-tile.c-contact{ --focus: center 50%; }
.frame-num{
  position:absolute; bottom:10px; left:12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(236,232,225,0.9);
  z-index:2;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ============================================
   Category page header
   ============================================ */
.cat-header{
  padding: 64px 28px 40px;
  border-bottom: 1px solid var(--line);
}
.cat-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.cat-meta{
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  display:flex; gap: 24px; flex-wrap:wrap;
}
.cat-meta span{ color: var(--accent); }

/* ============================================
   Liste de séries (1 cover -> clic -> 3/4 images)
   ============================================ */
.series-list{
  padding: 10px 28px 80px;
  display:flex; flex-direction:column;
}
.series-item{
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}
.series-head{
  display:flex; align-items:center; gap: 28px;
  cursor:pointer;
}
.series-cover{
  position:relative;
  width: 190px; height: 240px;
  flex-shrink:0;
  overflow:hidden;
}
.series-info{ flex:1; }
.series-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 42px);
  letter-spacing: 0.02em;
}
.series-sub{
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}
.series-toggle{
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--fg-muted);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink:0;
}
.series-item.is-open .series-toggle{
  transform: rotate(45deg);
  color: var(--accent);
}
.series-item.is-open .series-cover .ph::before{ transform: scale(1.05); }

.series-body{
  max-height:0;
  overflow:hidden;
  transition: max-height 0.6s ease;
}
.series-item.is-open .series-body{
  max-height: 6000px;
}

/* grille décalée portrait / paysage — signature.
   Masonry via CSS Grid : chaque photo garde son format d'origine et occupe
   une largeur proportionnelle à son orientation (les paysages prennent
   plus de place que les portraits) — calcul fait en JS, voir script.js. */
.series-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: 18px;
  padding-top: 36px;
}
.frame{
  position: relative;
  overflow: hidden;
}

/* les photos (vraies ou placeholders) remplissent exactement la cellule
   calculée pour elles — pas de recadrage puisque la cellule est dimensionnée
   sur mesure d'après leur format d'origine */
.frame .ph{
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}
.frame .shot-img{
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* logo discret, centré en bas de chaque photo (séries, archives, tirages).
   Pas sur les tuiles du menu/accueil ni sur les couvertures de séries. */
.frame::after,
.print-visual::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom: clamp(8px, 1.4vw, 18px);
  height: clamp(14px, 1.8vw, 26px);
  background: url('assets/logo.png') center bottom / contain no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
  pointer-events: none;
  z-index: 3;
}

@media (min-width: 1400px){
  .series-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px){
  .series-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .series-cover{ width: 100%; height: 220px; }
  .series-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; padding-top: 28px; }
}

.flat-grid{
  padding: 30px 28px 80px;
}
.prints-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 10px 28px 80px;
}
.print-card{
  display:flex; flex-direction:column;
}
.print-visual{
  position:relative;
  height: 340px;
  overflow:hidden;
}
.print-info{
  padding: 14px 4px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 10px;
}
.print-name{
  font-family: var(--font-display);
  font-size: 18px; font-weight:600; letter-spacing:0.03em;
}
.print-format{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.print-price{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  white-space:nowrap;
}
.print-buy{
  margin-top: 12px;
  width:100%;
  border: 1px solid var(--line);
  padding: 11px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.print-buy:hover{ border-color: var(--accent); color: var(--accent); }
.print-buy.is-added{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg);
}
.print-card{ padding-bottom: 6px; }

@media (max-width: 900px){
  .prints-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 500px){
  .prints-grid{ grid-template-columns: 1fr; }
}

.prints-note{
  margin: 0 28px 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-faint);
  max-width: 520px;
  line-height: 1.6;
}

/* ============================================
   Contact
   ============================================ */
.contact-view{
  min-height: calc(100vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap: 30px;
  padding: 40px 20px;
}
.contact-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 90px);
}
.contact-sub{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.1em;
  max-width: 420px;
}
.contact-link{
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  padding: 16px 34px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-link:hover{ border-color: var(--accent); color: var(--accent); }

/* ============================================
   Footer
   ============================================ */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 22px 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
}
.site-footer-insta:hover{ color: var(--accent); }

/* SEO */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.seo-text{max-width:720px;margin:0 auto;padding:40px 20px 0;text-align:center;color:var(--fg-faint);font-family:'Inter',sans-serif;font-weight:300;font-size:13px;line-height:1.7}

/* Anti-téléchargement (dissuasif) */
img, .ph, .frame, .cat-tile, .series-cover { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; }
.shot-img, .frame img, .cat-tile img, .series-cover img, .print-visual img { pointer-events:none; }