/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#fff;
color:#111;
}

body.no-scroll{
overflow:hidden;
}

/* SEO (contenu caché mais lisible par les moteurs) */

.seo-intro{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0, 0, 0, 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}


/* HEADER */

.site-header{
position:fixed;
top:0;
width:100%;
height:85px;
background:#fff;
display:flex;
align-items:center;
z-index:4000;
}

.header-inner{
width:100%;
padding:0 60px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.logo{
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:13px;
  line-height:1.5;
  opacity:0.7;
}

.menu a{
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:11px;
  line-height:1.5;
}

.logo{
cursor:pointer;
}



/* MENU */

.menu{
display:flex;
gap:28px;
align-items:center;
transition:opacity .2s ease;
flex-wrap:wrap;
}

.menu a{
text-decoration:none;
color:rgba(0,0,0,.6);
}

.menu a:hover{
opacity:.6;
}

body.no-scroll .menu{
opacity:0;
pointer-events:none;
}



/* TAGS */

.tags-wrap{
padding:110px 60px 0;
transition:opacity .6s ease;
opacity:1;
}

.tags-wrap.is-faded{
opacity:.14;
}

.tags-bar{
display:flex;
flex-wrap:wrap;
gap:6px 10px;
max-width:100%;
align-items:center;
}

.tags-bar button{
background:transparent;
border:0;
padding:0;
margin:0;
font-family:'Inter',sans-serif;
font-size:11px;
letter-spacing:1.5px;
line-height:1.5;
text-transform:uppercase;
color:rgba(0,0,0,.28);
cursor:pointer;
transition:opacity .2s ease;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

.tags-bar button:hover{
opacity:.6;
}

.tags-bar button.active{
opacity:1;
color:#111;
text-decoration:none;
}

.tag-reset{
opacity:1;
color:rgba(0,0,0,.28);
}



/* GRID */

.grid-wrap{
min-height:120px;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
padding:28px 60px 60px;
align-items:end;
transition:opacity .22s ease;
}

.grid.is-updating{
opacity:.2;
}

.grid img{
width:100%;
height:auto;
display:block;
cursor:pointer;
opacity:0;
transition:opacity 1.2s ease;
vertical-align:bottom;
}

.grid img.loaded{
opacity:1;
}

.grid img.no-lightbox{
cursor:default;
pointer-events:none;
}

.grid-empty{
padding:28px 60px 60px;
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
opacity:.5;
}



/* LIGHTBOX */

.lightbox{
position:fixed;
left:0;
right:0;
top:85px;
bottom:0;
background:rgba(255,255,255,.95);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease;
z-index:1500;
display:flex;
justify-content:center;
align-items:center;
padding:24px 40px 36px;
}

.lightbox.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.lightbox-content{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
width:auto;
max-width:100%;
max-height:100%;
}

.lightbox img,
.lightbox video{
display:block;
max-width:88vw;
max-height:calc(100vh - 85px - 110px);
width:auto;
height:auto;
}

#lightbox-video{
display:none;
background:#000;
}

.caption{
margin-top:12px;
opacity:0;
transition:opacity .4s ease .15s;
max-width:88vw;
}

.lightbox.active .caption{
opacity:1;
}

.caption-fr{
display:block !important;
font-family:'Inter',sans-serif !important;
font-size:11px !important;
letter-spacing:1.5px !important;
line-height:1.5 !important;
text-transform:none !important;
font-weight:200 !important;
color:#111 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

.caption-en{
display:block !important;
margin-top:4px !important;
font-family:'Inter',sans-serif !important;
font-size:11px !important;
letter-spacing:1.5px !important;
line-height:1.5 !important;
text-transform:none !important;
font-style:normal !important;
font-weight:200 !important;
color:rgba(0,0,0,.28) !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}



/* OVERLAY CV */

.overlay{
position:fixed;
inset:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:3000;
opacity:0;
pointer-events:none;
transition:opacity .5s ease;
}

.overlay.active{
opacity:1;
pointer-events:auto;
}

.overlay-inner{
width:100%;
max-width:900px;
padding:140px 80px 100px;
max-height:100vh;
overflow-y:auto;
transform:translateY(30px);
transition:transform .5s ease, opacity .22s ease;
scrollbar-width:none;
-ms-overflow-style:none;
}

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

.overlay.active .overlay-inner{
transform:translateY(0);
}

.overlay-inner.lang-fade{
opacity:.25;
}



/* BIO + LANG */

.bio-header{
display:flex;
justify-content:flex-start;
align-items:flex-start;
gap:20px;
margin-bottom:28px;
}

.bio{
font-size:14px;
opacity:.7;
}

.bio p{
margin:0 0 4px;
}



/* LANG SWITCH */

.lang-switch{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}

.site-lang-switch{
opacity:1;
transition:opacity .6s ease;
}

.lang-btn{
background:transparent;
border:0;
padding:0;
cursor:pointer;
font-family:'Inter', sans-serif;
font-size:11px;
letter-spacing:1.5px;
line-height:1.5;
text-transform:uppercase;
font-weight:200;
opacity:.35;
transition:opacity .2s ease;
}

.lang-btn.active{
opacity:.9;
}

.lang-slash{
font-size:11px;
letter-spacing:1.5px;
line-height:1.5;
text-transform:uppercase;
font-weight:200;
opacity:.35;
user-select:none;
}



/* TEXTE */

.cv-text{
font-size:14px;
line-height:1.9;
opacity:.75;
margin-bottom:80px;
}

.cv-text p{
margin:0 0 18px;
}

.cv-text .sig{
margin-top:22px;
opacity:.65;
}



/* MODE TITRE */

.grid.title-mode{
align-items:stretch;
}

.title-card{
background:#fff;
color:#111;
border:none;
width:100%;
display:flex;
align-items:flex-start;
justify-content:flex-start;
text-align:left;
padding:24px;
font-family:'Inter',sans-serif;
font-size:11px;
line-height:1.5;
letter-spacing:1.5px;
text-transform:none;
box-sizing:border-box;
aspect-ratio:1200 / 1009;
}

.title-card-inner{
max-width:92%;
white-space:normal;
word-break:break-word;
overflow-wrap:break-word;
}

.title-card.is-hidden{
display:none;
}



/* MODE VUE */

.grid.stacked-mode{
display:block;
max-width:1100px;
margin:0 auto;
padding:28px 60px 60px;
}

.stacked-item{
margin:0 0 56px;
}

.stacked-item:last-child{
margin-bottom:0;
}

.stacked-image{
display:block;
width:100%;
height:auto;
}

.stacked-caption{
margin-top:12px;
font-family:'Inter',sans-serif;
font-size:11px;
letter-spacing:1.5px;
line-height:1.5;
text-align:left;
max-width:92%;
white-space:normal;
word-break:break-word;
overflow-wrap:break-word;
}

.stacked-caption-title{
display:block;
color:#111;
text-transform:uppercase;
}

.stacked-caption-meta{
display:block;
color:rgba(0,0,0,.28);
text-transform:none;
}

.stacked-caption-year{
display:block;
color:rgba(0,0,0,.4);
text-transform:none;
}



/* CV LIST */

.cv-section{
margin-top:80px;
}

.cv-section h2{
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
font-weight:200;
color:rgba(0,0,0,.4);
margin-bottom:18px;
}

.cv-list{
opacity:.75;
display:grid;
grid-template-columns:80px 1fr;
column-gap:24px;
row-gap:6px;
margin-bottom:48px;
}

.cv-list .year{
font-size:11px;
letter-spacing:1.5px;
line-height:1.5;
text-transform:uppercase;
color:rgba(0,0,0,.22);
}

.cv-list .entries{
margin-bottom:12px;
}

.cv-list .entries div{
font-size:14px;
line-height:1.9;
color:inherit;
font-weight:inherit;
}

.cv-list em{
font-style:italic;
}

.cv-list .entries div:last-child{
margin-bottom:0;
}



/* RESPONSIVE TABLETTE */

@media (max-width: 1024px){

.site-header{
height:72px;
}

.header-inner{
padding:0 28px;
}

.logo,
.menu a{
font-size:11px;
letter-spacing:1.3px;
}

.menu{
gap:24px;
}

.tags-wrap{
padding:96px 28px 0;
}

.tags-bar{
gap:6px 10px;
}

.tags-bar button{
font-size:10px;
letter-spacing:1.3px;
}

.grid{
grid-template-columns:repeat(2,1fr);
padding:24px 28px 28px;
}

.grid-empty{
padding:24px 28px 28px;
}

.lightbox{
top:72px;
padding:20px 24px 28px;
}

.lightbox img,
.lightbox video{
max-width:92vw;
max-height:calc(100vh - 72px - 95px);
}

.overlay-inner{
max-width:none;
padding:120px 40px 70px;
}

.bio-header{
gap:16px;
margin-bottom:24px;
}

.bio,
.cv-text{
font-size:13px;
}

.cv-text{
line-height:1.8;
margin-bottom:64px;
}

.cv-list{
opacity:.75;
grid-template-columns:70px 1fr;
column-gap:20px;
}

.grid.stacked-mode{
max-width:860px;
padding:24px 28px 40px;
}

.stacked-item{
margin:0 0 40px;
}

}



/* RESPONSIVE TÉLÉPHONE */

@media (max-width: 680px){

.site-header{
height:auto;
min-height:64px;
padding:14px 0;
}

.header-inner{
padding:0 16px;
align-items:flex-start;
gap:14px;
flex-direction:column;
}

.logo{
font-size:10px;
letter-spacing:1.2px;
}

.menu{
gap:16px;
flex-wrap:wrap;
}

.menu a{
font-size:10px;
letter-spacing:1.2px;
}

.tags-wrap{
padding:118px 16px 0;
}

.tags-bar{
gap:6px 10px;
}

.tags-bar button{
font-size:10px;
letter-spacing:1.2px;
}

.grid{
grid-template-columns:1fr;
padding:20px 16px 16px;
}

.grid-empty{
padding:20px 16px 16px;
font-size:10px;
letter-spacing:1.2px;
}

.lightbox{
top:64px;
padding:16px 16px 24px;
}

.lightbox-content{
width:100%;
align-items:flex-start;
}

.lightbox img,
.lightbox video{
max-width:100%;
max-height:calc(100vh - 64px - 88px);
}

.caption{
margin-top:10px;
font-size:10px;
letter-spacing:1.2px;
line-height:1.4;
}

.overlay-inner{
padding:96px 20px 42px;
}

.bio-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
margin-bottom:22px;
}

.lang-switch{
gap:6px;
}

.lang-btn,
.lang-slash{
font-size:10px;
letter-spacing:1.2px;
}

.bio{
font-size:13px;
line-height:1.6;
}

.cv-text{
font-size:13px;
line-height:1.75;
margin-bottom:52px;
}

.cv-text p{
margin:0 0 14px;
}

.cv-section{
margin-top:56px;
}

.cv-list{
opacity:.75;
grid-template-columns:1fr;
row-gap:4px;
margin-bottom:40px;
}

.cv-list .year{
margin-top:12px;
font-size:10px;
letter-spacing:1.2px;
opacity:.2;
}

.cv-list .entries div{
  font-size:14px;
  line-height:1.9;
  color:inherit;   /* ← important */
  opacity:.75;
}

.title-card{
padding:18px;
font-size:11px;
line-height:1.5;
}

.grid.stacked-mode{
padding:20px 16px 32px;
}

.stacked-item{
margin:0 0 32px;
}

.stacked-caption{
margin-top:10px;
font-size:10px;
letter-spacing:1.2px;
max-width:100%;
}

}