@view-transition{
navigation:auto;
}

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

/* Hide vertical scrollbar on the home page only (needed for the
   seamless infinite-scroll carousel). Other pages keep a visible
   scrollbar so people can see where they are on the page. */

html.no-scrollbar{
scrollbar-width:none;      /* Firefox */
-ms-overflow-style:none;   /* old Edge / IE */
}

html.no-scrollbar::-webkit-scrollbar{
display:none;              /* Chrome / Safari */
}

body{
background:black;
color:white;
font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
}

@font-face{
font-family:"LatinModern";
src:url("fonts/lmroman-regular-webfont.woff") format("woff");
font-weight:normal;
font-style:normal;
}

@font-face{
font-family:"LatinModern";
src:url("fonts/lmroman-italic-webfont.woff") format("woff");
font-style:italic;
}

@font-face{
font-family:"LatinModern";
src:url("fonts/lmroman-bold-webfont.woff") format("woff");
font-weight:bold;
}

.viewer-caption{
margin-top:14px;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;

opacity:0;
transform:translateY(4px);
transition:
opacity 0.45s ease,
transform 0.45s ease;
}

.viewer-title{
font-size:clamp(8px, 0.72vw, 10px);
font-weight:700;
letter-spacing:0.01em;
color:rgba(255,255,255,0.52);
text-align:left;
flex:0 1 auto;

/* Meme fondu que .viewer-caption -- il lui faut sa propre transition
   car en mobile le titre est deplace hors de .viewer-caption (passe
   au-dessus de l'image, voir viewer.js). */
opacity:0;
transform:translateY(4px);
transition:
opacity 0.45s ease,
transform 0.45s ease;
}

.viewer-infos{
display:flex;
flex-direction:column;
text-align:right;
flex:0 1 auto;
}

.viewer-infos p{
font-size:clamp(7.5px, 0.66vw, 9.5px);
line-height:1.55;
letter-spacing:0.03em;
color:rgba(255,255,255,0.46);
}

/* Desktop only: titre/legendes 10% plus grands qu'en mobile. */

@media (min-width:901px){

.viewer-title{
font-size:clamp(8.8px, 0.792vw, 11px);
}

.viewer-infos p{
font-size:clamp(8.25px, 0.726vw, 10.45px);
}

}

.viewer-selection{
font-style:italic;
}

/* Each credit/spec group (eg. "PROD. Derive & Clin d'Oeil") is kept on
   one line -- if the line wraps on a narrow screen, it wraps between
   whole groups, never in the middle of a name. */

.info-group{
white-space:nowrap;
}

.info-sep{
opacity:0.6;
}

/* GLOBAL LAYOUT */

.layout{
display:flex;
}

/* SIDEBAR */

.sidebar{
display:flex;
flex-direction:column;
justify-content:space-between;

width:170px;
height:100vh;
height:100dvh;
position:fixed;
left:0;
top:0;
z-index:20;

padding:24px 24px 0px 24px;
}

.nav-item{
margin:10px 0;
}

.nav-img{
margin-top:auto;
}

.nav-abt{
margin-top:auto;
}

.sidebar a img{
opacity:0.35;
transition:opacity 0.2s;
}

.sidebar a:hover img{
opacity:0.7;
}

.sidebar a.active img{
opacity:1;
}

.main-nav{
margin:auto 0;     /* pushes it to the vertical middle */
display:flex;
flex-direction:column;
gap:20px;
}

.nav-icons{
display:flex;
width:120px;
flex-direction:column;
gap:30px;
margin:auto 0;   /* centers the 3 icons vertically */
}

.about-link{
margin-top:auto;   /* pushes ABOUT to bottom */
}

.about-link img{
height:auto;
width:120px;
display:block;
}

.logo img{
height:auto;
width:120px;
display:block;
}

/* MAIN CONTENT */

.content{
margin-left:194px;
width:calc(100% - 194px);
padding:40px;
min-width:0;
}

/* HOME GALLERY */

.home-gallery{
display:flex;
flex-direction:column;
gap:clamp(8px,10vmin,50px);

/* Fond opaque : si un apercu de la mosaique est plaque juste derriere
   (mode "reveal", voir .home-preview plus bas), il ne doit jamais se
   voir dans les espaces entre les grandes images -- seulement une fois
   qu'elles sont entierement sorties de l'ecran. */
position:relative;
z-index:1;
background:black;
}

/* Apercu non-cliquable de la mosaique (mode "reveal" uniquement, voir
   index.html) -- plaque en position fixe derriere les grandes images,
   reutilise la classe .content pour garder exactement le meme
   positionnement (marge sidebar, padding) que la vraie page. */
.home-preview{
position:fixed;
top:0;
left:0;
height:100vh;
height:100dvh;
overflow:hidden;
z-index:0;
pointer-events:none;
}

/* Les vignettes de .row partent normalement a opacity:0 et n'apparaissent
   qu'une fois le JS du viewer averti qu'elles sont chargees (classe
   is-loaded) -- mecanisme qui ne tourne jamais pour cet apercu statique,
   donc on les affiche directement. */
.home-preview .row img{
opacity:1;
}

.hero{
width:100%;
}

.hero img{
width:100%;
height:auto;
border-radius:20px;
display:block;
}

.hero .caption{
margin-top:12px;
font-size:clamp(11px,0.9vw,13px);
letter-spacing:0.05em;
color:rgba(255,255,255,0.35);
text-align:right;
}

.gallery{
display:flex;
flex-direction:column;
gap:20px;
}

.row{
display:flex;
gap:20px;
align-items:flex-start;
justify-content:center;
min-width:0;
}

.row img{
height:clamp(110px, 12vw, 200px);
width:auto;
border-radius:14px;
display:block;
cursor:pointer;
opacity:0;
transition:0.2s;
}

.row img.is-loaded{
opacity:1;
}

/* Arrivee depuis le carrousel "reveal" de la page d'accueil (voir
   index.html) : les vignettes y sont deja affichees a l'identique sans
   le moindre fondu -- on saute donc ce fondu ici aussi des la toute
   premiere peinture (pas de transition), sinon on voit un mini flash
   noir le temps qu'il se relance depuis zero sur cette page fraichement
   chargee. */
html.reveal-arrival .row img{
opacity:1;
transition:none;
}


.row img:hover{
opacity:0.85;
}

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

.viewer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);

/* Toujours au-dessus de la sidebar/barre du haut (z-index:10 en mobile) --
   fixe explicitement plutot que de compter sur l'ordre du DOM, qui peut
   changer selon le contexte d'empilement cree par l'opacite/transition
   (vu en de rares cas, ex. iPhone en mode paysage). */
z-index:50;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

opacity:0;
pointer-events:none;

transition:opacity 0.25s ease;
}

.viewer img{
width:100%;
height:auto;
max-height:75vh;
border-radius:20px;

transform:scale(0.9);
transition:transform 0.35s ease;
}

.viewer.active .viewer-caption,
.viewer.active .viewer-title{
opacity:1;
transform:translateY(0);

transition-delay:0.18s;
}

.viewer.active img{
transform:scale(1);
}

.viewer-content{
display:flex;
flex-direction:column;
max-width:75%;
margin:auto;            /* centers the whole block */
}

.viewer-close,
.viewer-nav{
position:absolute;
background:none;
border:none;
color:rgba(255,255,255,0.5);
cursor:pointer;
line-height:1;
z-index:1;
transition:color 0.2s;
}

.viewer-close:hover,
.viewer-nav:hover{
color:rgba(255,255,255,0.9);
}

.viewer-close{
top:24px;
right:28px;
font-size:32px;
}

.viewer-nav{
top:50%;
transform:translateY(-50%);
font-size:28px;
padding:12px;
}

.viewer-prev{
left:16px;
}

.viewer-next{
right:16px;
}

/* About content */

.about{
position:fixed;

top:50%;
left:calc(50% + 70px);

transform:translate(-50%, -50%);

display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.about-info{
max-width:750px;
width:70vw;
height:auto;
display:block;
}

.about-links{
display:flex;
gap:16px;
}

.about-links img{
height:45px;
width:auto;
display:block;

opacity:0.35;
transition:opacity 0.2s;
}

.about-links a:hover img{
opacity:0.7;
}


.research-intro{
max-width:1040px;
margin-inline:auto;
margin-bottom:48px;

text-align:center;
}

.research-intro p{
font-style:italic;
font-weight:normal;
font-size:19px;
line-height:1.5;
opacity:0.55;
max-width:42ch;
margin-inline:auto;
}

.research-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:56px 40px;

max-width:1040px;
margin-inline:auto;
}

.research-page .content{
padding-top:88px;
padding-bottom:88px;
}

.research-card{
display:flex;
flex-direction:column;
gap:8px;

text-decoration:none;
color:inherit;

background:rgba(255,255,255,0.045);
border-radius:16px;
padding:26px 24px;

transition:background 0.25s ease;
}

.research-card:hover{
background:rgba(255,255,255,0.075);
}

.research-date{
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:#FAB617;
opacity:0.9;
}

.research-card h2{
font-size:21px;
font-weight:500;
line-height:1.35;
}

.research-desc{
font-size:14px;
line-height:1.55;
opacity:0.6;
max-width:46ch;
}

.article-page .content{
background:rgb(220, 220, 220);
color:black;
}

.article{

max-width:900px;
margin:0 auto;

display:flex;
flex-direction:column;
gap:18px;

font-family:"LatinModern", serif;
}

.article p{
font-weight:200;
}

.article img{
width:100%;
border-radius:12px;
}

.article h1{
font-size:28px;
font-weight:500;
text-align:center;
}

.back-link{
position:absolute;
top:20px;
left:20px;

text-decoration:none;
opacity:0.5;
}

.article figure{
margin:32px 0;
text-align:center;
}

.article figure img{
background:rgb(220, 220, 220);
padding:14px;
border-radius:6px;
border:1px solid rgba(0,0,0,0.08);
}

.article figcaption{
margin-top:8px;
font-size:12px;
opacity:0.6;
}

.article table{
width:100%;
border-collapse:collapse;
margin:2em 0;
font-size:0.95em;
line-height:1.4;
}

.article thead{
border-bottom:1.5px solid #444;
}

.article tbody tr:first-child{
border-top:1.5px solid #444;
}

.article tbody tr:last-child{
border-bottom:1.5px solid #444;
}

.article th,
.article td{
padding:6px 10px;
text-align:center;
}

.article th:first-child,
.article td:first-child{
text-align:left;
}

@media (max-width:900px){


/* Layout becomes vertical */

.layout{
flex-direction:column;
}

/* Sidebar becomes top bar */

.sidebar{

--nav-h: clamp(80px,18vmin,100px);
--pad-v: clamp(8px,3vmin,12px);
--pad-h: 24px;
--row-gap: 8px;
--grid-h: calc(var(--nav-h) - (var(--pad-v) * 2) - var(--row-gap));


position:fixed;
top:0;
left:0;
width:100%;
z-index:20;
background:black;

height:var(--nav-h);

padding-top:var(--pad-v);
padding-bottom:var(--pad-v);
padding-left:var(--pad-h);
padding-right:var(--pad-h);

display:grid;
grid-template-columns:auto 1fr auto auto;
grid-template-rows:1fr 1fr;

row-gap: var(--row-gap);
column-gap: 8px;

align-items:center;

overflow:hidden;
}

/* Logo */

.logo{
grid-column:1;
grid-row:1 / span 2;
}


/* Navigation icons */
.nav-img{ grid-column:3; grid-row:1; }
.nav-col{ grid-column:4; grid-row:1; }
.nav-rsc{ grid-column:3; grid-row:2; }
.nav-abt{ grid-column:4; grid-row:2; }

/* Icon size */

.logo img{
height:calc(var(--grid-h) + var(--row-gap));
width:auto;
display:block;
}

.nav-item img{
height:calc(var(--grid-h) / 2);
width:auto;
display:block;
}

.nav-item{
margin:0;
padding:0;
}

.nav-img,
.nav-rsc,
.nav-abt{
margin-top:0;
margin-bottom:0;
}

.nav-rsc,
.nav-abt{
align-self:end;
}

.nav-img,
.nav-col{
align-self:start ;
}
/* Content expands full width */

.content{
margin-top:80px;
margin-left:0;
width:100%;
padding:10px 24px 24px 24px;
}

/* Mosaic rows scroll horizontally */

.row{
display:flex;
gap:12px;
overflow-x:auto;
justify-content:center;

scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
}

.row img{
height:110px;
width:auto;
flex:0 0 auto;
}

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

.gallery{
gap:12px;
}

.home-gallery{
gap:clamp(8px,4vmin,24px);
}

.about{
left:50%;
top:42%;
}

.about-info{
width:85vw;
}

.viewer-close{
top:16px;
right:16px;
font-size:26px;
}

.viewer-nav{
font-size:22px;
padding:8px;
}

/* Le titre passe au-dessus de l'image en mobile (deplace par viewer.js) --
   garde l'espace equilibre au-dessus et en dessous de l'image plutot que
   tout entasser en bas. */

.viewer-title{
margin-bottom:10px;
}

.viewer-infos{
margin-left:auto;
}

.research-intro{
max-width:520px;
margin-inline:auto;
margin-bottom:32px;
}

.research-grid{
grid-template-columns:1fr;
gap:40px;

max-width:520px;
margin-inline:auto;
}

.research-desc{
max-width:none;
}

.research-page .content{
padding-top:56px;
padding-bottom:56px;
}
}