:root{
--noir:#ffffff;
--blanc:#111111;
--gris:#666660;
--ligne:#e0e0e0;
--nav-h:48px;
--gutter:20px;
--space-section:52px;
--space-section-tight:28px;
--project-card-width:300px;
--about-left-fr:1.4fr;
--about-right-fr:0.9fr;
--project-visual-percent:62%;
--home-hero-image-height-vh:100;
--home-hero-image-width-percent:50;
--nav-bg:var(--noir);
--font-size-body:13px;
--font-size-nav:11px;
--font-size-hero-title:88px;
--font-size-section-title:14px;
--font-size-project-title:18px;
--font-size-meta:11px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
background:var(--noir);
color:var(--blanc);
font-family:'IBM Plex Mono', monospace;
font-weight:300;
font-size:var(--font-size-body);
line-height:1.7;
}

a{
color:inherit;
text-decoration:none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:2px solid rgba(17,17,17,0.55);
outline-offset:2px;
}

.nav{
display:block;
position:fixed;
top:14px;
right:14px;
z-index:220;
height:auto;
font-family:'IBM Plex Mono', monospace;
font-size:var(--font-size-nav);
letter-spacing:0.08em;
text-transform:uppercase;
}

body.nav-overlay .nav{
position:fixed;
right:14px;
left:auto;
}

body.nav-overlay:not(.page-home){
padding-top:0;
}

.nav-center{
display:none;
position:absolute;
top:calc(100% + 8px);
right:0;
z-index:230;
min-width:min(86vw,340px);
max-height:calc(100vh - 90px);
overflow:auto;
background:rgba(255,255,255,0.96);
border:1px solid var(--ligne);
box-shadow:0 14px 34px rgba(0,0,0,0.16);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
flex-direction:column;
}

.nav.nav-open .nav-center{
display:flex;
}

.nav-center a{
min-height:46px;
display:flex;
align-items:center;
justify-content:flex-start;
padding:10px 14px;
color:var(--gris);
border-bottom:1px solid var(--ligne);
transition:color 0.15s, background 0.15s, border-color 0.15s;
margin:0;
min-width:0;
font-size:12px;
line-height:1.3;
white-space:normal;
}

.nav-center a:last-child{
border-bottom:none;
}

.nav-center a:hover{
color:var(--blanc);
background:rgba(17,17,17,0.06);
}

.nav-center a.is-active,
.nav-center a[aria-current="page"]{
color:var(--blanc);
background:rgba(17,17,17,0.09);
}

.nav-left,
.nav-right{
display:none;
}

.nav-burger{
display:inline-flex;
align-items:center;
justify-content:center;
height:36px;
width:36px;
padding:0;
border:1px solid rgba(255,255,255,0.25);
background:rgba(17,17,17,0.58);
color:#f6f6f1;
font-size:10px;
cursor:pointer;
border-radius:999px;
letter-spacing:0.1em;
line-height:1;
font-family:inherit;
text-transform:uppercase;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}

.nav-burger-icon{
font-size:14px;
line-height:1;
}

.hero{
display:grid;
grid-template-columns:calc(var(--home-hero-image-width-percent) * 1%) calc((100 - var(--home-hero-image-width-percent)) * 1%);
height:calc(var(--home-hero-image-height-vh) * 1vh);
border-bottom:1px solid var(--ligne);
}

body.page-home.nav-overlay .hero{
height:calc(var(--home-hero-image-height-vh) * 1vh);
}

.hero-image{
border-right:1px solid var(--ligne);
overflow:hidden;
height:100%;
}

.hero-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 20%;
filter:grayscale(20%) contrast(1.05);
display:block;
}

.hero-content{
  padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

#home-hero.hero-text-front{
position:relative;
display:block;
min-height:420px;
}

#home-hero.hero-text-front .hero-image{
height:100%;
border-right:none;
}

#home-hero.hero-text-front .hero-content{
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.52) 100%);
}

#home-hero.hero-text-front .hero-top,
#home-hero.hero-text-front .hero-title,
#home-hero.hero-text-front .hero-bottom-title,
#home-hero.hero-text-front .hero-bottom-sub,
#home-hero.hero-text-front .hero-bottom-label,
#home-hero.hero-text-front .link-arrow{
color:#f6f6f1;
text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

#home-hero.hero-text-front .hero-bottom{
border-top:1px solid rgba(255,255,255,0.45);
}

#home-hero.hero-text-front .link-arrow{
border-bottom:1px solid rgba(255,255,255,0.75);
}

.hero-top{
font-size:10px;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--gris);
width:100%;
}

.hero-title{
font-family:'IBM Plex Mono', monospace;
font-size:clamp(calc(var(--font-size-hero-title) * 0.55), 6vw, var(--font-size-hero-title));
font-weight:300;
line-height:0.9;
letter-spacing:-0.02em;
margin:0;
text-transform:none;
color:var(--blanc);
}

.hero-bottom{
border-top:1px solid var(--ligne);
padding-top:26px;
}

.hero-bottom-label{
font-size:10px;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--gris);
margin-bottom:12px;
display:block;
}

.hero-bottom-title{
font-size:calc(var(--font-size-meta) + 4px);
font-weight:300;
margin-bottom:8px;
}

.hero-bottom-sub{
font-size:var(--font-size-meta);
color:var(--gris);
margin-bottom:16px;
}

.link-arrow{
font-size:11px;
letter-spacing:0.15em;
text-transform:uppercase;
border-bottom:1px solid var(--gris);
padding-bottom:2px;
display:inline-block;
transition:border-color 0.2s;
}

.link-arrow:hover{
border-color:var(--blanc);
}

/* SECTION HEADER */
.row-header {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  border-bottom: 1px solid var(--ligne);
  height: 48px;
}
.rh-num {
  border-right: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  padding: 0 20px 0 15px;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gris);
  text-transform: uppercase;
}
.rh-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 15px;
  font-size: var(--font-size-section-title);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.rh-more {
  display: flex;
  align-items: center;
  padding: 0 20px 0 15px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color 0.2s;
  border-left: 1px solid var(--ligne);
}
.rh-more:hover { color: var(--blanc); }

.news {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ligne);
}

.news::-webkit-scrollbar {
  display: none;
}

.news-item {
  width: 400px;
  flex-shrink: 0;
  border-right: 1px solid var(--ligne);
  padding: 44px 26px 44px 20px;
  transition: background 0.2s;
}

.news-item:hover {
  background: rgba(17,17,17,0.03);
}

.news-item:last-child {
  border-right: none;
}

.news-date {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gris);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.news-title {
  font-size: var(--font-size-project-title);
  font-weight: 300;
  color: var(--blanc);
  line-height: 1.45;
  margin-bottom: 16px;
}

.news-body {
  font-size: calc(var(--font-size-body) - 1px);
  color: var(--gris);
  line-height: 1.8;
}

.meta{
font-size:var(--font-size-meta);
letter-spacing:0.06em;
color:var(--gris);
text-transform:uppercase;
}

.projects{
position:relative;
border-bottom:1px solid var(--ligne);
padding:44px 0 0 0;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
scroll-snap-type:x proximity;
}

.projects::-webkit-scrollbar{
display:none;
}

.projects::before{
content:"01";
position:absolute;
top:0;
left:0;
width:200px;
height:44px;
display:flex;
align-items:center;
padding:0 var(--gutter);
border-right:1px solid var(--ligne);
border-bottom:1px solid var(--ligne);
font-size:10px;
letter-spacing:0.25em;
color:var(--gris);
text-transform:uppercase;
pointer-events:none;
}

.projects::after{
content:"créations   →";
position:absolute;
top:0;
left:220px;
right:0;
height:44px;
display:flex;
align-items:center;
justify-content: flex-start;
padding:0 var(--gutter);
margin-left: 10px;
border-bottom:1px solid var(--ligne);
font-size:var(--font-size-section-title);
letter-spacing:0.06em;
color:var(--gris);
text-transform:uppercase;
pointer-events:none;
}

.projects-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0; /* Remove spacing between project items */
  min-width: max-content;
  padding-right: 24px;
}

.project {
  width: var(--project-card-width);
  flex-shrink: 0;
  padding: 0 0 30px 0;
  scroll-snap-align:start;
}

.project img {
  width: 100%;
  aspect-ratio: 5/6;
  object-fit: cover;
  display: block;
  margin: 0;
  filter: grayscale(12%) contrast(1.03);
}

.project .meta {
  font-size: var(--font-size-meta);
  letter-spacing: 0.2em;
  color: var(--gris);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: left;
  margin-left: 18px;
}

.project h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-size-project-title);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  margin: 6px 0 8px 18px; /* Added bottom margin for spacing */
  color: var(--blanc);
  text-align: left;
  border-bottom: 1px solid var(--gris); /* Added bottom border */
  padding-bottom: 4px; /* Added padding for spacing */
}

.project-description {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-size-meta);
  color: var(--gris);
  line-height: 1.35;
  margin-top: 10px;
  text-align: justify;
  margin-left: 18px;
}

.about{
display:grid;
grid-template-columns:200px var(--about-left-fr) var(--about-right-fr);
border-bottom:1px solid var(--ligne);
}

.about-left,
.about-right{
padding:var(--space-section) 26px var(--space-section) 20px;
}

.about-left{
grid-column:2;
border-right:1px solid var(--ligne);
}

.about-right{
grid-column:3;
}

.about::before{
content:"02";
display:flex;
align-items:flex-start;
padding:var(--space-section) 26px var(--space-section) 20px;
color:var(--gris);
font-size:10px;
letter-spacing:0.25em;
text-transform:uppercase;
border-right:1px solid var(--ligne);
}

.big{
font-family:'IBM Plex Mono', monospace;
font-size:calc(var(--font-size-body) + 2px);
line-height:1.7;
letter-spacing:0;
font-weight:300;
text-transform:none;
color:var(--blanc);
margin:0;
}

.about-right p,
.footer{
font-size:var(--font-size-meta);
color:var(--gris);
line-height:1.8;
}

.about-right p{
max-width:64ch;
}

.footer{
display:grid;
grid-template-columns:200px 1fr auto 1fr;
border-bottom:1px solid var(--ligne);
}

.footer > div{
padding:var(--space-section-tight) 24px var(--space-section-tight) 20px;
border-right:1px solid var(--ligne);
}

.footer > div:last-child{
border-right:none;
text-align:right;
}

.footer > div:nth-child(3){
letter-spacing:0.08em;
font-size:10px;
}

.custom-page {
  border-bottom: 1px solid var(--ligne);
}

.custom-page-section {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: calc(100vh - 180px);
}

.custom-page-num {
  border-right: 1px solid var(--ligne);
  padding: 36px 24px 36px 20px;
  color: var(--gris);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.custom-page-content {
  padding: 36px 24px;
}

.custom-page-content h1 {
  margin: 0 0 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(calc(var(--font-size-project-title) * 1.15), 4vw, calc(var(--font-size-project-title) * 2.3));
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.custom-page-body {
  max-width: 80ch;
  font-size: calc(var(--font-size-body) + 2px);
  line-height: 1.8;
  color: var(--blanc);
}

@media (max-width: 900px){
.nav{
top:12px;
right:12px;
}

.nav-center{
min-width:min(92vw,320px);
}

.rh-title,
.projects::after,
.meta {
font-size:14px;
}

.projects {
padding-top:44px;
}

.projects::after {
height:44px;
}

.projects::before {
height:44px;
}

.nav-center a{
font-size:11px;
letter-spacing:0.08em;
padding:10px 12px;
}

/* hero : texte toujours devant l'image sur mobile */
.hero{
position:relative;
display:block;
height:calc(var(--home-hero-image-height-vh) * 1vh);
min-height:360px;
}

.hero-image{
height:100%;
border-right:none;
border-bottom:none;
}

.hero-content{
position:absolute;
inset:0;
z-index:2;
padding:30px 22px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.52) 100%);
}

.hero-top{
font-size:9px;
letter-spacing:0.16em;
line-height:1.4;
}

.hero-title{
font-size:clamp(42px, 12vw, 66px);
line-height:0.92;
}

.hero-bottom{
padding-top:20px;
}

.hero-bottom-title{
font-size:calc(var(--font-size-body) + 1px);
line-height:1.4;
}

.hero-bottom-sub{
line-height:1.6;
margin-bottom:14px;
}

.hero-top,
.hero-title,
.hero-bottom-title,
.hero-bottom-sub,
.hero-bottom-label,
.hero-content .link-arrow{
color:#f6f6f1;
text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

.hero-bottom{
border-top:1px solid rgba(255,255,255,0.45);
}

.hero-content .link-arrow{
border-bottom:1px solid rgba(255,255,255,0.75);
}

.projects::before{
width:140px;
}

.projects::after{
left:220px;
}

.project{
width:240px;
}

.about{
grid-template-columns:140px 1fr;
}

.about::before{
grid-row:1 / span 2;
}

.about-left{
grid-column:2;
border-right:none;
border-bottom:1px solid var(--ligne);
}

.about-right{
grid-column:2;
}

.footer{
grid-template-columns:140px 1fr 1fr;
}

.footer > div:last-child{
text-align:left;
}

.custom-page-section {
grid-template-columns:140px minmax(0, 1fr);
}
}

@media (max-width: 640px){
.nav{
top:10px;
right:10px;
}

.nav-burger{
height:36px;
width:36px;
}

.nav-center{
min-width:calc(100vw - 20px);
}

.nav-center a{
height:48px;
width:100%;
justify-content:flex-start;
padding:0 14px;
border-bottom:1px solid var(--ligne);
}

.nav-center a:last-child{
border-bottom:none;
}

/* row-header : masquer la colonne numéro fixe */
.row-header{
grid-template-columns:1fr auto;
}
.rh-num{
display:none;
}

/* hero : réduire le padding horizontal */
.hero-content{
padding:32px 20px;
}

/* about : une seule colonne */
.about{
grid-template-columns:1fr;
}
.about::before{
display:none;
}
.about-left{
grid-column:1;
}
.about-right{
grid-column:1;
}

/* footer : empiler verticalement */
.footer{
grid-template-columns:1fr;
}
.footer > div{
border-right:none;
}
.footer > div:not(:last-child){
border-bottom:1px solid var(--ligne);
}
.footer > div:last-child{
text-align:left;
}

/* custom page : une seule colonne */
.custom-page-section{
grid-template-columns:1fr;
}
.custom-page-num{
display:none;
}

/* news items : adapter à la largeur de l'écran */
.news-item{
width:90vw;
min-width:260px;
}

.projects::after{
content:"créations   →";
}
}

/* Taille responsive pour les images des pages projets */
.project-detail {
  display: grid;
  grid-template-columns: minmax(0, var(--project-visual-percent)) minmax(220px, 1fr);
  column-gap: 24px;
  row-gap: 6px;
  align-items: start;
  padding: 18px 15px var(--space-section);
}

.project-visual {
  grid-column: 1;
}

.project-header {
  grid-column: 2;
  align-self: start;
}

.project-detail img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: calc((100vh - var(--nav-h)) * 0.6);
  object-fit: cover;
  margin: 0;
}

/* Marges spécifiques pour les pages projets */
.project-detail h1 {
  grid-column: 2;
  grid-row: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(calc(var(--font-size-project-title) * 1.1), 2.8vw, calc(var(--font-size-project-title) * 1.8));
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--blanc);
  margin: 0 0 8px 0;
}
.project-detail .project-meta, .project-detail .project-type {
  margin-left: 0;
}

.project-meta {
  margin-top: 0;
}

.project-photo-credit {
  margin-left: 0;
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: var(--font-size-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.project-detail .project-description {
  grid-column: 1 / -1;
  font-size: calc(var(--font-size-body) + 2px);
  line-height: 1.7;
  color: var(--blanc);
  margin-top: 16px;
  width: 62%;
  max-width: 62%;
  max-width: min(62%, 72ch);
}

.project-detail .project-description p {
  margin-bottom: 14px;
}

.project-detail .project-section-title {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: var(--font-size-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

@keyframes projectEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-detail h1,
.project-detail img,
.project-detail .project-meta,
.project-detail .project-photo-credit,
.project-detail .project-description,
.project-detail .project-description {
  opacity: 0;
  animation: projectEnter 0.55s ease forwards;
}

.project-detail h1 { animation-delay: 0.06s; }
.project-detail img { animation-delay: 0.12s; }
.project-detail .project-meta,
.project-detail .project-photo-credit { animation-delay: 0.18s; }
.project-detail .project-description { animation-delay: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .project-detail {
    display: block;
    padding: 0 15px var(--space-section);
  }

  .project-detail img,
  .project-detail .project-description {
    width: 100%;
    max-width: 100%;
  }

  .project-detail h1,
  .project-detail .project-meta,
  .project-detail .project-photo-credit,
  .project-detail .project-description {
    margin-left: 0;
    margin-right: 0;
  }

  .project-detail h1,
  .project-detail .project-meta,
  .project-detail .project-photo-credit,
  .project-detail .project-description,
  .project-detail .project-description p,
  .custom-page-body,
  .about-right p,
  .news-body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .news-item {
    padding: 38px 24px 38px 20px;
  }

  .about-left,
  .about-right,
  .about::before {
  padding-top: 32px;
  padding-bottom: 32px;
  }

  .about-right p,
  .custom-page-body,
  .project-detail .project-description,
  .news-body {
  line-height:1.72;
  }

  .footer > div {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

  @media (max-width: 640px){
  .hero-content{
  padding:26px 18px;
  }

  .hero-title{
  font-size:clamp(34px, 13vw, 52px);
  }

  .hero-bottom-title{
  font-size:var(--font-size-body);
  }

  .project-detail{
  padding:0 14px var(--space-section-tight);
  }

  .project-detail h1{
  margin-bottom:10px;
  }

  .project-detail .project-meta,
  .project-photo-credit{
  font-size:10px;
  letter-spacing:0.12em;
  }

  .project-detail .project-description{
  font-size:calc(var(--font-size-body) + 1px);
  line-height:1.74;
  }

  .project-detail .project-description p{
  margin-bottom:12px;
  }

  .custom-page-content{
  padding:30px 18px;
  }

  .custom-page-body{
  font-size:calc(var(--font-size-body) + 1px);
  }

  .news-item{
  width:88vw;
  min-width:240px;
  padding:30px 18px 30px 18px;
  }
  }