:root{
--noir:#ffffff;
--blanc:#111111;
--gris:#666660;
--ligne:#e0e0e0;
--nav-h:48px;
--gutter:20px;
--section-gap:0px;
--space-section:52px;
--space-section-tight:28px;
--projects-section-offset:0px;
--projects-cards-top-padding:44px;
--projects-cards-gap:10px;
--projects-cards-bottom-padding:36px;
--about-top-padding:56px;
--about-bottom-padding:48px;
--news-section-offset:0px;
--news-cards-top-padding:40px;
--news-cards-bottom-padding:38px;
--news-cards-side-padding:20px;
--news-title-body-gap:16px;
--news-text-gap:16px;
--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);
--nav-button-bg:#111111;
--nav-panel-bg:#ffffff;
--nav-text-color:var(--blanc);
--nav-button-text-color:var(--noir);
--nav-button-opacity:1;
--nav-panel-opacity:1;
--hero-top-color:var(--gris);
--hero-title-color:var(--blanc);
--link-color:var(--gris);
--link-hover-color:var(--blanc);
--active-line-color:var(--gris);
--nav-band-color:var(--ligne);
--nav-band-thickness:1px;
--menu-top:14px;
--menu-right:14px;
--menu-bottom:auto;
--menu-left:auto;
--home-top:14px;
--home-right:auto;
--home-bottom:auto;
--home-left:14px;
--nav-panel-right:0;
--nav-panel-left:auto;
--nav-panel-top:calc(100% + 10px);
--nav-panel-bottom:auto;
--nav-panel-origin:top right;
--font-size-body:13px;
--font-size-nav:11px;
--font-size-menu-button:11px;
--font-size-hero-top:11px;
--font-size-hero-title:88px;
--font-size-section-title:14px;
--font-size-projects-section-title:14px;
--font-size-news-section-title:14px;
--font-size-about-label:14px;
--font-size-news-title:18px;
--font-size-slider-project-title:18px;
--project-hover-dim-opacity:0.9125;
--project-hover-grayscale:6.5%;
--project-hover-contrast:1.0675;
--font-size-page-title:34px;
--font-size-project-title:18px;
--font-size-meta:11px;
--font-size-project-meta:11px;
--font-size-photo-credit:11px;
--font-size-footer:11px;
--hero-overlay-top:rgba(255,255,255,0.08);
--hero-overlay-bottom:rgba(0,0,0,0.58);
}

*{
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;
overflow-x:hidden;
}

.skip-link{
position:absolute;
left:14px;
top:-48px;
z-index:400;
padding:10px 14px;
background:var(--blanc);
color:var(--noir);
border-radius:999px;
font-size:var(--font-size-nav);
line-height:1;
transition:top 0.18s ease;
}

.skip-link:focus{
top:14px;
}

main{
display:block;
}

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;
inset:0;
z-index:220;
height:auto;
font-family:'IBM Plex Mono', monospace;
font-size:var(--font-size-nav);
letter-spacing:0.08em;
pointer-events:none;
}

.nav.nav-band-top::before{
content:"";
position:fixed;
top:0;
left:0;
right:0;
height:62px;
background:transparent;
border-top:var(--nav-band-thickness) solid var(--nav-band-color);
border-bottom:var(--nav-band-thickness) solid var(--nav-band-color);
box-shadow:none;
pointer-events:none;
z-index:210;
}

body.nav-overlay .nav{
position:fixed;
inset:0;
}

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

.nav-home-slot,
.nav-menu-slot{
position:fixed;
z-index:221;
pointer-events:none;
}

.nav-home-slot{
top:var(--home-top);
right:var(--home-right);
bottom:var(--home-bottom);
left:var(--home-left);
}

.nav-menu-slot{
top:var(--menu-top);
right:var(--menu-right);
bottom:var(--menu-bottom);
left:var(--menu-left);
}

.nav-center{
display:none;
position:absolute;
top:var(--nav-panel-top);
bottom:var(--nav-panel-bottom);
right:var(--nav-panel-right);
left:var(--nav-panel-left);
z-index:230;
min-width:min(86vw,340px);
max-height:calc(100vh - 90px);
overflow:auto;
background:color-mix(in srgb, var(--nav-panel-bg) calc(var(--nav-panel-opacity) * 100%), transparent);
border:1px solid rgba(17,17,17,0.22);
border-radius:2px;
box-shadow:0 12px 28px rgba(0,0,0,0.14);
flex-direction:column;
padding:10px 0 8px;
isolation:isolate;
transform:translateY(-6px);
opacity:0;
pointer-events:none;
transform-origin:var(--nav-panel-origin);
transition:opacity 0.18s ease, transform 0.18s ease;
}

.nav-center::after{
content:"";
position:absolute;
left:10px;
right:10px;
top:10px;
height:1px;
background:rgba(17,17,17,0.12);
pointer-events:none;
}

.nav.nav-open .nav-center{
display:flex;
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

.nav-center a{
min-height:50px;
display:flex;
align-items:center;
justify-content:flex-start;
padding:13px 18px 12px;
color:var(--nav-text-color);
border-bottom:1px solid rgba(17,17,17,0.12);
transition:color 0.15s, background 0.15s, border-color 0.15s;
margin:0;
min-width:0;
font-size:var(--font-size-nav);
line-height:1.3;
white-space:normal;
letter-spacing:0.1em;
position:relative;
z-index:1;
text-shadow:none;
}

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

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

.nav-center a.is-active,
.nav-center a[aria-current="page"]{
color:var(--nav-text-color);
background:rgba(17,17,17,0.08);
font-weight:600;
box-shadow:inset 2px 0 0 var(--active-line-color);
}

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

.nav-home-button,
.nav-burger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:42px;
padding:0 16px;
border:none;
background:color-mix(in srgb, var(--nav-button-bg) calc(var(--nav-button-opacity) * 100%), transparent);
color:var(--nav-button-text-color);
font-size:var(--font-size-menu-button);
cursor:pointer;
border-radius:2px;
letter-spacing:0.14em;
line-height:1;
font-family:inherit;
box-shadow:0 8px 20px rgba(0,0,0,0.14);
transition:background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
position:relative;
pointer-events:auto;
}

.nav-home-button{
text-decoration:none;
}

.nav-home-button:hover,
.nav-burger:hover{
background:var(--nav-button-bg);
background:color-mix(in srgb, var(--nav-button-bg) calc(var(--nav-button-opacity) * 100%), transparent);
transform:translateY(-1px);
filter:brightness(0.92);
box-shadow:0 10px 24px rgba(0,0,0,0.18);
}

.nav-home-button.is-active,
.nav.nav-open .nav-burger{
background:var(--nav-button-bg);
background:color-mix(in srgb, var(--nav-button-bg) calc(var(--nav-button-opacity) * 100%), transparent);
filter:brightness(0.88);
}

.nav-home-button::after,
.nav-burger::after{
content:"";
position:absolute;
left:8px;
right:8px;
bottom:6px;
height:1px;
background:currentColor;
opacity:0.28;
pointer-events:none;
}

.nav-burger-icon{
font-size:calc(var(--font-size-menu-button) + 2px);
line-height:1;
width:12px;
text-align:center;
}

.nav-burger-label{
font-size:var(--font-size-menu-button);
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);
}

@supports (height: 100svh){
  .hero{
  height:calc(var(--home-hero-image-height-vh) * 1svh);
  }

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

@supports (height: 100dvh){
  .hero{
  height:calc(var(--home-hero-image-height-vh) * 1dvh);
  }

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

.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 22%;
filter:grayscale(12%) contrast(1.08);
display:block;
transform:scale(1.015);
}

.hero-content{
  padding:58px 54px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  min-width:0;
  overflow:hidden;
  position:relative;
}

#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, var(--hero-overlay-top) 0%, rgba(255,255,255,0) 24%, var(--hero-overlay-bottom) 100%);
}

#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-top{
color:var(--hero-top-color);
text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

#home-hero.hero-text-front .hero-title{
color:var(--hero-title-color);
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:var(--font-size-hero-top);
letter-spacing:0.2em;
color:var(--hero-top-color);
width:100%;
margin-bottom:18px;
}

.hero-title{
font-family:'IBM Plex Mono', monospace;
font-size:clamp(calc(var(--font-size-hero-title) * 0.56), 6.2vw, calc(var(--font-size-hero-title) * 1.04));
font-weight:300;
line-height:0.86;
letter-spacing:-0.03em;
margin:0;
text-transform:none;
color:var(--blanc);
color:var(--hero-title-color);
max-width:8.5ch;
text-wrap:balance;
word-break:normal;
hyphens:none;
}

.hero-bottom{
border-top:1px solid var(--ligne);
padding-top:22px;
max-width:28rem;
}

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

.hero-bottom-title{
font-size:var(--font-size-section-title);
font-weight:300;
margin-bottom:10px;
line-height:1.25;
}

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

.link-arrow{
font-size:var(--font-size-meta);
letter-spacing:0.15em;
color:var(--link-color);
border-bottom:1px solid var(--active-line-color);
padding-bottom:2px;
display:inline-block;
transition:border-color 0.2s;
}

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

/* SECTION HEADER */
.row-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--ligne);
  min-height: 54px;
}
.rh-num {
  display: none;
}
.rh-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px 0 20px;
  font-size: var(--font-size-news-section-title);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.rh-more {
  display: flex;
  align-items: center;
  padding: 0 20px 0 15px;
  font-size: var(--font-size-meta);
  letter-spacing: 0.15em;
  color: var(--link-color);
  transition: color 0.2s;
  border-left: 1px solid var(--ligne);
}
.rh-more:hover { color: var(--link-hover-color); }

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

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

.news-item {
  width: 400px;
  flex-shrink: 0;
  border-right: 1px solid var(--ligne);
  padding: var(--news-cards-top-padding) calc(var(--news-cards-side-padding) + 8px) var(--news-cards-bottom-padding) var(--news-cards-side-padding);
  transition: background 0.2s;
  scroll-snap-align:start;
}

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

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

.news-date {
  font-size: var(--font-size-meta);
  letter-spacing: 0.2em;
  color: var(--gris);
  display: block;
  margin-bottom: var(--news-text-gap);
}

.news-title {
  font-size: var(--font-size-news-title);
  font-weight: 300;
  color: var(--blanc);
  line-height: 1.35;
  margin-bottom: var(--news-title-body-gap);
  max-width:17ch;
  text-wrap:balance;
}

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

.news-body p{
  margin:0 0 var(--news-text-gap);
}

.news-body p:last-child{
  margin-bottom:0;
}

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

.projects{
position:relative;
border-bottom:1px solid var(--ligne);
margin-top:var(--projects-section-offset);
padding:var(--projects-cards-top-padding) 0 0 0;
overflow:hidden;
}

.projects::before{
display:none;
}

.projects::after{
content:"Créations   →";
position:absolute;
top:0;
left:0;
z-index:2;
right:0;
height:48px;
display:flex;
align-items:center;
justify-content: flex-start;
padding:0 var(--gutter);
font-size:var(--font-size-projects-section-title);
letter-spacing:0.04em;
color:var(--gris);
pointer-events:none;
background:var(--noir);
}

.projects-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--projects-cards-gap);
  width:100%;
  min-width:0;
  padding: 0 24px 0 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

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

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

.project > a{
  display:block;
  width:100%;
  aspect-ratio:5/6;
  overflow:hidden;
  background:rgba(17,17,17,0.03);
  transition:background 0.16s ease, box-shadow 0.16s ease;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  filter: grayscale(10%) contrast(1.05);
  transform:scale(1);
  transition:transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.project .meta {
  display:none;
}

.project h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-size-slider-project-title);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  margin: 8px 0 10px 18px;
  color: var(--blanc);
  text-align: left;
  border-bottom: 1px solid var(--active-line-color);
  padding-bottom: 6px;
  max-width:14ch;
  transition:color 0.18s ease, border-color 0.18s ease;
  text-wrap:balance;
}

.project-description {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-size-meta);
  color: var(--gris);
  line-height: 1.5;
  margin-top: 12px;
  text-align: justify;
  margin-left: 18px;
  max-width:24ch;
  transition:color 0.2s ease;
}

@media (hover: hover) and (pointer: fine){
  .projects .project:hover > a{
    background:rgba(17,17,17,0.08);
    box-shadow:inset 0 0 0 1px var(--blanc);
  }

  .projects .project:hover img{
    transform:scale(1.022);
    filter:grayscale(var(--project-hover-grayscale)) contrast(var(--project-hover-contrast));
  }

  .projects .project:hover .meta{
    color:var(--blanc);
  }

  .projects .project:hover h2{
    color:var(--blanc);
    border-color:var(--blanc);
  }

  .projects .project:hover .project-description{
    color:var(--blanc);
  }
}

.about{
display:grid;
grid-template-columns:minmax(0, var(--about-left-fr)) minmax(0, var(--about-right-fr));
border-bottom:1px solid var(--ligne);
position:relative;
}

.about-left,
.about-right{
padding:var(--about-top-padding) 28px var(--about-bottom-padding) 20px;
}

.about-left .meta,
.about-right .meta{
font-size:var(--font-size-about-label);
letter-spacing:0.06em;
line-height:1.2;
}

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

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

.about::before{
display:none;
}

.about-left,
.about-right{
position:relative;
z-index:1;
}

.about-overlay-link{
position:absolute;
inset:0;
z-index:3;
}

.about-linked{
transition:background 0.2s;
}

.about-linked:hover{
background:rgba(17,17,17,0.03);
}

.about-linked:focus-within{
background:rgba(17,17,17,0.03);
}

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

.about-copy{
font-size:var(--font-size-body);
color:var(--gris);
line-height:1.8;
}

.about-left .about-copy{
color:var(--blanc);
}

.about-copy p{
margin:0 0 0.95em;
}

.about-copy p:last-child{
margin-bottom:0;
}

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

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

.contact-extra-text{
margin-top:1.2em;
padding-top:1.1em;
border-top:1px solid var(--ligne);
}

.footer{
font-size:var(--font-size-footer);
color:var(--gris);
line-height:1.8;
}

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

.footer > div{
padding:var(--space-section-tight) 24px var(--space-section-tight) 20px;
}

.footer-contact{
border-right:1px solid var(--ligne);
}

.footer-brand{
text-align:right;
white-space:nowrap;
}

.footer-line{
margin:0;
}

.footer a,
.project h2 a,
.project-photo-credit a,
.project-rich-content a,
.custom-page-body a,
.about-right a{
color:var(--link-color);
transition:color 0.2s, border-color 0.2s;
}

.footer a:hover,
.project h2 a:hover,
.project-photo-credit a:hover,
.project-rich-content a:hover,
.custom-page-body a:hover,
.about-right a:hover{
color:var(--link-hover-color);
}

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

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

.custom-page-num {
  display:none;
}

.custom-page-content {
  padding: 36px 28px 42px 20px;
}

.custom-page-content h1 {
  margin: 0 0 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(calc(var(--font-size-page-title) * 0.88), 4vw, calc(var(--font-size-page-title) * 1.35));
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
  word-break:normal;
  hyphens:none;
}

.custom-page-body {
  max-width: 80ch;
  font-size: var(--font-size-body);
  line-height: 1.8;
  color: var(--blanc);
  text-align: justify;
}

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

.rh-title {
font-size:var(--font-size-news-section-title);
}

.projects::after {
font-size:var(--font-size-projects-section-title);
}

.about-left .meta,
.about-right .meta{
font-size:var(--font-size-about-label);
}

.projects {
padding-top:44px;
}

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

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

.nav-center a{
font-size:var(--font-size-nav);
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:420px;
}

@supports (height: 100svh){
  .hero{
  height:calc(var(--home-hero-image-height-vh) * 1svh);
  }
}

@supports (height: 100dvh){
  .hero{
  height:calc(var(--home-hero-image-height-vh) * 1dvh);
  }
}

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

.hero-content{
position:absolute;
inset:0;
z-index:2;
padding:34px 24px 24px;
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:var(--font-size-hero-top);
letter-spacing:0.16em;
line-height:1.4;
padding-right:88px;
}

.hero-title{
font-size:min(clamp(40px, 10.4vw, 72px), calc((100vw - 48px) / 4.5));
line-height:0.92;
max-width:calc(100vw - 48px);
}

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

.hero-bottom-title{
font-size:var(--font-size-section-title);
line-height:1.4;
}

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

.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-top{
color:var(--hero-top-color);
text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

.hero-title{
color:var(--hero-title-color);
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{
display:none;
}

.projects::after{
left:0;
}

.project{
width:260px;
}

.project h2{
font-size:clamp(17px, 3.9vw, calc(var(--font-size-slider-project-title) * 1.08));
line-height:1.26;
}

.news-title{
font-size:clamp(16px, 3.2vw, var(--font-size-news-title));
line-height:1.32;
max-width:16ch;
}

.custom-page-content h1{
font-size:clamp(28px, 6vw, calc(var(--font-size-page-title) * 0.96));
max-width:13ch;
}

.project-detail h1{
font-size:clamp(28px, 6.2vw, calc(var(--font-size-project-title) * 1.7));
max-width:100%;
overflow-wrap:normal;
word-break:normal;
hyphens:none;
}

.about{
grid-template-columns:1fr 1fr;
gap:0;
}

.about::before{
display:none;
}

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

.about-right{
grid-column:2;
min-width:0;
}

.footer{
grid-template-columns:minmax(0, 1fr) auto;
}

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

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

.project-detail {
padding: 18px 15px calc(var(--space-section) + 2px);
}

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

@media (max-width: 640px){
.nav.nav-band-top::before{
height:56px;
}

.nav-home-button,
.nav-burger{
min-height:38px;
padding:0 12px;
gap:8px;
}

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

.nav-center a{
min-height:50px;
width:100%;
justify-content:flex-start;
padding:0 16px;
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:24px 16px;
}

.hero-title{
max-width:9.2ch;
line-height:0.9;
}

/* about : une seule colonne */
.about{
grid-template-columns:1fr;
}
.about::before{
display:none;
}
.about-left{
grid-column:1;
padding-top:calc(var(--about-top-padding) * 0.6);
padding-bottom:calc(var(--about-bottom-padding) * 0.72);
border-right:none;
border-bottom:1px solid var(--ligne);
}
.about-right{
grid-column:1;
padding-top:calc(var(--about-top-padding) * 0.42);
padding-bottom:calc(var(--about-bottom-padding) * 0.72);
}

/* 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:min(90vw, 360px);
min-width:260px;
 padding:calc(var(--news-cards-top-padding) * 0.72) calc(var(--news-cards-side-padding) * 0.9 + 8px) calc(var(--news-cards-bottom-padding) * 0.78) calc(var(--news-cards-side-padding) * 0.9);
}

.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: 34px;
  row-gap: 10px;
  align-items: start;
  padding: 28px 18px calc(var(--space-section) + 8px);
}

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

.project-header {
  grid-column: 2;
  align-self: start;
  min-width:0;
  padding-top:4px;
}

.project-kicker{
  margin:0 0 14px;
  font-size:var(--font-size-meta);
  letter-spacing:0.18em;
  color:var(--gris);
}

.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.2), 2.6vw, calc(var(--font-size-project-title) * 1.55));
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--blanc);
  margin: 0 0 12px 0;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}
.project-detail .project-meta, .project-detail .project-type {
  margin-left: 0;
}

.project-meta {
  margin-top: 0;
  font-size: var(--font-size-project-meta);
}

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

.project-detail .project-description {
  grid-column: 1 / -1;
  font-size: var(--font-size-body);
  line-height: 1.82;
  color: var(--blanc);
  margin-top: 22px;
  width: min(68%, 76ch);
  max-width: min(68%, 76ch);
  text-align: justify;
}

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

.project-detail .project-section-title {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: var(--font-size-meta);
  letter-spacing: 0.2em;
  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.08s; }
.project-detail img { animation-delay: 0.14s; }
.project-detail .project-meta,
.project-detail .project-photo-credit { animation-delay: 0.2s; }
.project-detail .project-description { animation-delay: 0.28s; }
@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;
  }

  .project-detail h1,
  .custom-page-content h1,
  .project h2,
  .news-title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .news-item {
    padding: calc(var(--news-cards-top-padding) * 0.82) calc(var(--news-cards-side-padding) + 8px) calc(var(--news-cards-bottom-padding) * 0.9) calc(var(--news-cards-side-padding));
  }

  .about-left,
  .about-right {
  padding-top: calc(var(--about-top-padding) * 0.64);
  padding-bottom: calc(var(--about-bottom-padding) * 0.72);
  }

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

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

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

  .hero-top{
  padding-right:92px;
  }

  .hero-title{
  font-size:min(clamp(30px, 11.2vw, 48px), calc((100vw - 30px) / 4.55));
  line-height:0.92;
  max-width:100%;
  text-wrap:balance;
  }

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

  .projects-inner{
  padding:0 12px 0 12px;
  gap:calc(var(--projects-cards-gap) * 0.7);
  }

  .project{
  width:calc((100vw - 24px - (var(--projects-cards-gap) * 0.7)) / 2);
  min-width:calc((100vw - 24px - (var(--projects-cards-gap) * 0.7)) / 2);
  max-width:220px;
  }

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

  .project-detail img{
  height:auto;
  aspect-ratio:5/6;
  object-fit:cover;
  }

  .project-detail h1{
  margin-bottom:10px;
  line-height:1.06;
  max-width:100%;
  }

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

  .project-detail .project-meta{
  font-size:var(--font-size-project-meta);
  }

  .project-photo-credit{
  font-size:var(--font-size-photo-credit);
  }

  .project-detail .project-description{
  font-size:var(--font-size-body);
  line-height:1.74;
  width:100%;
  max-width:100%;
  }

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

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

  .custom-page-content h1{
  font-size:clamp(24px, 8vw, 34px);
  max-width:12ch;
  }

  .project h2{
  font-size:clamp(14px, 4.6vw, calc(var(--font-size-slider-project-title) * 0.92));
  max-width:100%;
  line-height:1.2;
  margin:8px 0 8px 10px;
  }

  .project-description{
  font-size:clamp(10px, 2.9vw, var(--font-size-meta));
  line-height:1.42;
  margin-top:8px;
  margin-left:10px;
  max-width:100%;
  }

  .news-title{
  font-size:clamp(16px, 4.8vw, calc(var(--font-size-news-title) * 0.94));
  max-width:15ch;
  }

  .custom-page-body{
  font-size:var(--font-size-body);
  line-height:1.76;
  }

  .news-item{
  width:min(88vw, 340px);
  min-width:240px;
  padding:calc(var(--news-cards-top-padding) * 0.74) calc(var(--news-cards-side-padding) * 0.9 + 8px) calc(var(--news-cards-bottom-padding) * 0.78) calc(var(--news-cards-side-padding) * 0.9);
  }
  }

@media (max-width: 380px){
  .hero-title{
  font-size:min(clamp(26px, 9.8vw, 38px), calc((100vw - 24px) / 4.7));
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  }

  .projects-inner{
  padding:0 10px 0 10px;
  gap:calc(var(--projects-cards-gap) * 0.7);
  }

  .project{
  width:calc((100vw - 20px - (var(--projects-cards-gap) * 0.7)) / 2);
  min-width:calc((100vw - 20px - (var(--projects-cards-gap) * 0.7)) / 2);
  }

  .project-detail h1{
  font-size:clamp(22px, 8.4vw, 30px);
  line-height:1.04;
  max-width:100%;
  }
}