@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400..700&family=Archivo:wght@400;500;600&display=swap');

:root{
  --abyss:#030c0e;
  --deep:#0a1a1d;
  --mist:#dce8e9;
  --steel:#7e999c;
  --glacier:#8fc3cc;
  --line:rgba(220,232,233,.10);
  --display:'Familjen Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --util:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --gut:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--abyss);color:var(--mist);
  font-family:var(--util);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--glacier);outline-offset:3px}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px var(--gut);
  background:linear-gradient(to bottom,rgba(3,12,14,.9),rgba(3,12,14,0));
  backdrop-filter:blur(6px);
}
.nav__mark{
  font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--mist);text-decoration:none;white-space:nowrap;
}
.nav__menu{display:flex;gap:clamp(16px,2.6vw,34px);list-style:none;margin:0;padding:0}
.nav__menu a{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--steel);text-decoration:none;padding-bottom:4px;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav__menu a:hover{color:var(--mist)}
.nav__menu a[aria-current]{color:var(--glacier);border-bottom-color:var(--glacier)}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero picture{position:absolute;inset:0}
.hero__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.04);
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--abyss) 2%,rgba(3,12,14,.32) 46%,rgba(3,12,14,.55) 100%),
    radial-gradient(120% 80% at 15% 100%,rgba(143,195,204,.14),transparent 60%);
}
.hero__type{position:relative;z-index:2;padding:0 var(--gut) clamp(40px,7vh,80px);width:100%}
.hero__eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--glacier);
  margin:0 0 clamp(10px,2vh,20px);
}
.hero__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(3.4rem,13vw,12rem);line-height:.86;letter-spacing:-.045em;
  margin:0 0 clamp(16px,3vh,28px);margin-left:-.035em;
}
.hero__meta{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  margin:0;max-width:56ch;line-height:2;
}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(40px,7vh,80px);z-index:2;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;
}
.hero__scroll::after{content:'';width:1px;height:56px;background:linear-gradient(var(--steel),transparent)}

/* ---------------- pieces ---------------- */
.work{
  display:grid;grid-template-columns:minmax(200px,26%) 1fr;
  gap:clamp(24px,5vw,64px);
  padding:clamp(80px,14vh,180px) var(--gut);
  border-top:1px solid var(--line);
}
.work__rail{position:sticky;top:96px;align-self:start}
.work__idx{
  font-family:var(--display);font-weight:500;font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--glacier);
  opacity:.55;margin:0 0 18px;
}
.work__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.75rem,2.9vw,2.6rem);line-height:1.06;letter-spacing:-.032em;margin:0 0 22px;
}
.work__spec{
  font-size:.74rem;line-height:2;letter-spacing:.1em;color:var(--steel);
  margin:0 0 22px;padding-top:20px;border-top:1px solid var(--line);
}
.work__tag{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--glacier);margin:0}
.work__strip{display:flex;flex-direction:column;gap:clamp(28px,6vh,80px)}

.shot{
  margin:0;position:relative;
  width:fit-content;max-width:100%;
  opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
}
.shot.is-in{opacity:1;transform:none}
/* jamais plus grand que la resolution native, jamais plus haut que l'ecran */
.shot picture{display:block}
.shot img{
  width:auto;height:auto;max-width:100%;max-height:78vh;
  background:var(--deep);
}
.shot__n{
  position:absolute;top:12px;left:-14px;
  font-size:.6rem;letter-spacing:.2em;color:var(--steel);
  background:var(--abyss);padding:3px 7px;
}
.shot--soft img{opacity:.94}
.shot:nth-child(3n+2){margin-left:auto}
.shot:nth-child(5n+5){margin-left:auto}

/* ---------------- page de categorie ---------------- */
.head{padding:calc(var(--gut) + 76px) var(--gut) clamp(30px,6vh,60px)}
.head__eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--glacier);margin:0 0 18px;
}
.head__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.8rem,9vw,7rem);line-height:.9;letter-spacing:-.045em;margin:0 0 24px;margin-left:-.03em;
}
.head__intro{color:var(--steel);font-size:.92rem;line-height:1.85;max-width:52ch;margin:0}

.grid{
  display:grid;gap:clamp(18px,3vw,40px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  padding:0 var(--gut) clamp(60px,10vh,120px);
}
.card{text-decoration:none;color:inherit;display:block;position:relative}
.card__frame{overflow:hidden;background:var(--deep);aspect-ratio:4/5}
.card__frame picture{display:block;width:100%;height:100%}
.card__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease;
  filter:saturate(.8) brightness(.86);
}
.card:hover .card__frame img,.card:focus-visible .card__frame picture{display:block;width:100%;height:100%}
.card__frame img{
  transform:scale(1.04);filter:saturate(1) brightness(1);
}
.card__title{
  font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.03em;
  margin:16px 0 6px;line-height:1.15;
}
.card__meta{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);margin:0}

/* ---------------- accueil ---------------- */
.gates{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);
}
.gate{
  background:var(--abyss);padding:clamp(40px,7vw,90px) clamp(24px,4vw,54px);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:background .5s ease;
}
.gate:hover{background:var(--deep)}
.gate__n{font-size:.62rem;letter-spacing:.24em;color:var(--glacier);margin:0 0 20px}
.gate__t{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.035em;margin:0 0 14px;line-height:1.02}
.gate__d{color:var(--steel);font-size:.8rem;line-height:1.8;margin:0}

.note{
  padding:clamp(60px,12vh,140px) var(--gut);border-top:1px solid var(--line);
  max-width:64ch;
}
.note p{color:var(--steel);font-size:.92rem;line-height:1.9}

/* ---------------- footer ---------------- */
.foot{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding:44px var(--gut) 64px;border-top:1px solid var(--line);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
}
.foot a{color:var(--steel);text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--mist)}

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  .work{grid-template-columns:1fr;gap:32px}
  .work__rail{position:static}
  .shot:nth-child(n){width:100%;margin-left:0}
  .shot__n{left:8px}
  .nav__mark{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shot{opacity:1;transform:none;transition:none}
  .card__frame picture{display:block;width:100%;height:100%}
.card__frame img{transition:none}
}


/* ---------------- CV ---------------- */
.cv__lead{
  padding:0 var(--gut) clamp(30px,6vh,60px);
  color:var(--steel);font-size:.92rem;line-height:1.9;max-width:56ch;
}
.cv__lead a{color:var(--glacier);text-decoration:none;border-bottom:1px solid var(--line)}
.entries{display:flex;flex-direction:column}
.entry{
  display:grid;grid-template-columns:88px 1fr;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.entry:first-child{border-top:1px solid var(--line)}
.entry__y{
  font-size:.68rem;letter-spacing:.14em;color:var(--glacier);
  padding-top:4px;white-space:nowrap;
}
.entry__t{font-size:.88rem;line-height:1.75;color:var(--mist);margin:0}
.entry__t span{color:var(--steel)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tags li{
  font-size:.68rem;letter-spacing:.12em;color:var(--steel);
  border:1px solid var(--line);padding:7px 13px;
}

/* ---------------- presse ---------------- */
.clip img{
  max-height:none;width:100%;height:auto;
  border:1px solid var(--line);background:#fff;
}
.clip{width:100%}

@media (max-width:600px){
  .entry{grid-template-columns:1fr;gap:4px}
  .entry__y{padding-top:0}
}


/* ---------------- page CV : fond eclairci pour la lisibilite ---------------- */
body.page-cv{ background: #101f27; }
body.page-cv .nav{ background: linear-gradient(to bottom, rgba(16,31,39,.92), rgba(16,31,39,0)); }
body.page-cv .foot{ border-top-color: rgba(220,232,233,.14); }

/* ---------------- fil d'Ariane (retour vers la categorie) ---------------- */
.nav__left{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.nav__back{
  font-family:var(--util); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); text-decoration:none; padding-bottom:2px;
  border-bottom:1px solid var(--line); white-space:nowrap;
  transition:color .25s ease, border-color .25s ease;
}
.nav__back:hover{ color:var(--glacier); border-color:var(--glacier); }


/* ---------------- sections a peu de photos (1-2 vues) ---------------- */
/* le padding genereux est pense pour des series longues ; sur une piece
   isolee il laisse un vide disproportionne. On resserre et on recentre
   pour que la photo devienne un vrai temps fort plutot qu'un trou. */
.work--solo{
  padding-top:clamp(48px,8vh,100px);
  padding-bottom:clamp(48px,8vh,100px);
}
.work--solo .work__strip{
  align-items:center;
}
.work--solo .shot{
  margin-left:auto !important;
  margin-right:auto !important;
}
.work--solo .shot img{
  max-height:min(82vh,880px);
}
.work--solo::before{
  /* le halo signature, plus present ici car c'est le seul element visuel
     de la section : il donne du poids a une piece unique. */
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, var(--accent-soft, rgba(143,195,204,.10)) 0%, transparent 62%);
  pointer-events:none; z-index:0;
}
.work--solo{ position:relative; }
.work--solo .work__rail, .work--solo .work__strip{ position:relative; z-index:1; }

@media (max-width:820px){
  .work--solo{ padding-top:36px; padding-bottom:36px; }
}


/* ---------------- nom de la collection, toujours visible dans la nav ---------------- */
.nav__collection{
  font-family:var(--display); font-weight:500; font-size:.85rem;
  letter-spacing:-.01em; color:var(--mist);
  padding-left:14px; margin-left:2px; border-left:1px solid var(--line);
  white-space:nowrap;
}
@media (max-width:640px){
  .nav__collection{
    padding-left:0; margin-left:0; border-left:none;
    flex-basis:100%; font-size:.78rem; color:var(--glacier);
  }
}