:root{color-scheme:light;--paper:#faf9f6;--ink:#242421;--muted:#77766e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:hover,button:hover{color:var(--muted)}a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:7px}header{height:98px;padding:0 3.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.name{font:26px Georgia,serif;width:max-content}nav{display:flex;gap:30px;font-size:14px}nav a{color:var(--muted)}nav a.active{color:var(--ink)}#view-toggle{justify-self:end;font-size:14px}.stage{height:calc(100svh - 173px);min-height:330px;display:flex;align-items:center;justify-content:center;padding:20px 9vw 30px;gap:7vw}.stage img{display:block;max-width:100%;max-height:100%;object-fit:contain}.stage.pair img:first-child{max-width:49%;max-height:100%}.stage.pair img:last-child{max-width:38%;max-height:66%}.stage button{padding:0;border:0;background:transparent;display:contents;cursor:pointer}footer{min-height:75px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:12px 3.5vw 24px;gap:20px;font-size:13px}.caption{color:var(--muted)}.counter{font-variant-numeric:tabular-nums}.controls{justify-self:end;display:flex;gap:24px}.controls button{border:0;background:none;padding:0;cursor:pointer;font-size:14px}.index{padding:45px 3.5vw 80px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:60px 38px}.thumb{display:flex;align-items:center;justify-content:center;height:180px}.thumb img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s}.thumb:hover img{opacity:.75}.project-list{padding:48px 7vw 70px;display:grid;grid-template-columns:1fr 1fr;column-gap:10vw;row-gap:70px}.project-card figure{margin:0;height:300px;display:flex;align-items:center;justify-content:center}.project-card img{max-width:100%;max-height:100%;object-fit:contain}.project-label{display:flex;justify-content:space-between;gap:20px;margin-top:22px;border-top:1px solid #deddd6;padding-top:14px}.project-label h1{font:22px Georgia,serif;margin:0}.project-label span{font-size:13px;color:var(--muted)}.info{max-width:680px;margin:10vh auto;padding:0 30px}.info h1{font:42px Georgia,serif;font-weight:normal;margin-bottom:42px}.info p{font-size:19px;line-height:1.7}.info .contact{margin-top:55px;font-size:15px;display:flex;gap:28px}.info a{text-decoration:underline;text-underline-offset:5px}.empty{padding:15vh 10vw} @media(min-width:1500px){.stage{padding-top:40px;padding-bottom:45px}.index{grid-template-columns:repeat(6,minmax(0,1fr))}.thumb{height:200px}}@media(max-width:700px){header{height:110px;padding:23px 22px;grid-template-columns:1fr auto;gap:20px}.name{font-size:24px}nav{grid-row:2;grid-column:1 / -1;justify-content:center;gap:27px}#view-toggle{grid-row:1;grid-column:2}.stage{height:calc(100svh - 205px);padding:20px 22px;min-height:280px;gap:20px}.stage.pair{flex-direction:column}.stage.pair img:first-child,.stage.pair img:last-child{max-width:100%;max-height:47%}footer{padding:20px 22px;grid-template-columns:1fr auto;min-height:95px}.caption{grid-column:1/-1;grid-row:2}.counter{grid-column:1;grid-row:1}.controls{grid-column:2;grid-row:1}.index{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 25px;padding:30px 22px}.thumb{height:175px}.project-list{grid-template-columns:1fr;padding:35px 22px;gap:50px}.project-card figure{height:280px}.info{margin:6vh auto}.info p{font-size:17px}.info h1{font-size:34px}.info .contact{flex-wrap:wrap}}

.contact-page{max-width:720px;margin-top:7vh}.contact-page .email{font-size:18px}.contact-page form{margin-top:65px}.contact-page h1{margin-bottom:36px}.contact-page label{display:block;font-size:14px;margin-bottom:12px}.contact-page label span{color:var(--muted)}textarea,input{font:16px/1.6 Arial,sans-serif;color:var(--ink);background:transparent;border:1px solid #aaa99f;border-radius:0;padding:12px;width:100%}textarea{resize:vertical;min-height:150px}textarea:focus,input:focus{outline:1px solid var(--ink);outline-offset:2px}.signature{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}.send{display:block;border:0;border-bottom:1px solid var(--ink);background:none;padding:8px 0;margin-top:32px;cursor:pointer}.contact-page .form-note,.contact-page #form-status{font-size:14px;line-height:1.6;color:var(--muted);margin:18px 0}.contact-page #form-status:empty{display:none}@media(max-width:450px){.signature{grid-template-columns:1fr}.contact-page form{margin-top:45px}}

@font-face{font-family:"Inter Variable";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
header{height:128px;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px;padding:24px 3.5vw 18px}
header .name{grid-column:1;grid-row:1}
header #view-toggle{grid-column:2;grid-row:1}
header nav{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;font-family:"Inter Variable",Arial,sans-serif}
header nav a:nth-child(1){justify-self:start}header nav a:nth-child(2){justify-self:center}header nav a:nth-child(3){justify-self:end}
.stage{height:calc(100svh - 203px)}
.index{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:40px 28px}
.thumb{height:140px}.thumb img{width:auto;height:auto}
@media(max-width:700px){header{padding:23px 22px 18px;height:120px}.stage{height:calc(100svh - 215px)}.index{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px;padding:30px 22px}.thumb{height:125px}.stage.pair{flex-direction:row;gap:6vw}.stage.pair img:first-child{max-width:50%;max-height:90%}.stage.pair img:last-child{max-width:40%;max-height:70%}}
@media(min-width:1200px){.index{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:380px){.index{grid-template-columns:repeat(2,minmax(0,1fr))}}

header .name{display:block;position:relative;width:240px;height:32px;overflow:hidden;mix-blend-mode:multiply}header .name img{position:absolute;width:260px;height:260px;max-width:none;left:-10px;top:-110px}@media(max-width:450px){header .name{width:190px;height:28px}header .name img{width:206px;height:206px;left:-8px;top:-87px}}

/* The drawn layout: central signature, left navigation, project beside the image. */
header.plan-header{height:115px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:start;padding:30px 3.5vw 20px;gap:24px;font-family:"Inter Variable",Arial,sans-serif;font-size:14px}
header.plan-header .name{grid-column:2;grid-row:1;justify-self:center}
.header-left{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:4px}
header.plan-header #view-toggle{justify-self:auto}
.header-info{grid-column:3;grid-row:1;justify-self:end;padding-top:4px}
.gallery{position:relative}
.project-switch{position:absolute;left:3.5vw;top:50%;transform:translateY(-50%);max-width:13vw;font-family:"Inter Variable",Arial,sans-serif;font-size:14px;line-height:1.5;z-index:2;text-underline-offset:6px}
.project-switch:hover{text-decoration:underline}
.gallery .stage{height:calc(100svh - 180px);min-height:320px;padding:25px 18vw 40px;display:flex;align-items:center;justify-content:center}
.image-spread{position:relative;display:flex;justify-content:center;align-items:center;gap:5vw;width:100%;height:100%;min-width:0}
.image-spread img{object-fit:contain;width:auto;height:auto;max-width:100%;max-height:100%;display:block}
.gallery .stage.pair{gap:0}
.gallery .stage.pair img:first-child{max-width:50%;max-height:100%}
.gallery .stage.pair img:nth-child(2){max-width:40%;max-height:72%}
.gallery .stage .image-nav{position:absolute;display:block;top:0;bottom:0;width:50%;border:0;background:transparent;padding:0;z-index:1;touch-action:pan-y}
.image-nav-left{left:0;cursor:w-resize}.image-nav-right{right:0;cursor:e-resize}
.image-nav:focus-visible{outline:1px solid #777;outline-offset:6px}
footer{display:flex;justify-content:center;align-items:flex-start;min-height:65px;padding:15px 3.5vw 25px}
footer:empty{display:none}
@media(max-width:700px){header.plan-header{height:112px;padding:24px 22px 16px;gap:12px}header.plan-header .name{width:190px;height:28px}header.plan-header .name img{width:206px;height:206px;left:-8px;top:-87px}.project-switch{position:static;display:block;transform:none;max-width:none;margin:10px 22px 0;font-size:14px}.gallery .stage{height:calc(100svh - 216px);padding:24px 22px 35px;min-height:260px}.gallery .stage.pair{flex-direction:row}.gallery .stage.pair img:first-child{max-width:50%}.gallery .stage.pair img:nth-child(2){max-width:40%}.image-spread{gap:6vw}}
@media(max-width:370px){header.plan-header{padding-left:16px;padding-right:16px;gap:8px}header.plan-header .name{width:155px;height:24px}header.plan-header .name img{width:168px;height:168px;left:-6px;top:-70px}}

@font-face{font-family:"Fiori Dorati";src:url("fonts/Fiori-Dorati.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--type:"Fiori Dorati",Georgia,serif}
body,header.plan-header,.project-switch,button,input,textarea,.project-label h1,.info h1{font-family:var(--type);font-weight:400}
header.plan-header,header.plan-header #view-toggle,.project-switch,.controls button{font-size:18px;line-height:1.4}
header.plan-header .name{position:static;width:auto;height:auto;overflow:visible;mix-blend-mode:normal;font-family:var(--type);font-size:34px;line-height:1.15;letter-spacing:.07em}
footer,.project-label span,.contact-page label,.contact-page .form-note,.contact-page #form-status{font-size:16px}
input,textarea{font-size:19px}.contact-page .email{font-size:22px}
@media(max-width:700px){header.plan-header{grid-template-columns:1fr auto;grid-template-rows:auto auto;height:135px;gap:16px}header.plan-header .name{grid-column:1/-1;grid-row:1;font-size:30px}.header-left{grid-row:2;flex-direction:row;gap:24px;padding:0}.header-info{grid-row:2;grid-column:2;padding:0}.gallery .stage{height:calc(100svh - 230px)}.gallery:not(:has(.project-switch)) .stage{height:calc(100svh - 200px)}}

@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-Italic.ttf") format("truetype");font-weight:300 700;font-style:italic;font-display:swap}
:root{--type:"Cormorant Garamond",Georgia,serif}
body{font-size:17px;font-weight:500}
header.plan-header,#view-toggle,.project-switch,button,input,textarea,.project-label h1,.info h1{font-family:var(--type)}
header.plan-header,header.plan-header #view-toggle,.project-switch{font-size:17px;font-weight:500}
header.plan-header .name{font-family:"Fiori Dorati",Georgia,serif;font-weight:400}
.project-label{margin:0 0 18px;padding:0;border:0;align-items:baseline}
.project-label h1{font-size:21px;line-height:1.3;font-weight:500}
.project-label span{font-size:14px}
.project-list{padding-top:30px;row-gap:52px}
footer,.contact-page label,.contact-page .form-note,.contact-page #form-status{font-size:15px}
input,textarea{font-size:17px}.contact-page .email{font-size:19px}.contact-page h1{font-size:32px}.info p{font-size:18px}
@media(max-width:700px){.project-label h1{font-size:20px}.project-list{gap:40px}.project-label{margin-bottom:14px}.project-switch{font-size:16px}.contact-page h1{font-size:28px}}

.home-view{background:#000;color:#fff}
.home-view header,.home-view footer{display:none}
.entrance{min-height:100svh;display:grid;place-items:center;padding:24px}
.entrance a{font-family:"Fiori Dorati",Georgia,serif;font-size:clamp(30px,5vw,72px);font-weight:400;letter-spacing:.07em;line-height:1.2;color:#fff;text-align:center;padding:18px 0}
.entrance a:hover{opacity:.8}
.project-label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.project-label h1{text-transform:uppercase;letter-spacing:.06em}

/* ALL — grille en colonnes (masonry) : images entières, sans recadrage, sans lamelles */
.index{display:block;column-count:4;column-gap:34px;padding:45px 3.5vw 90px}
.thumb{display:block;width:100%;height:auto;margin:0 0 34px;break-inside:avoid;-webkit-column-break-inside:avoid}
.thumb img{width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;display:block}
@media(min-width:1600px){.index{column-count:5}}
@media(max-width:900px){.index{column-count:3;column-gap:22px;padding:35px 22px}.thumb{margin-bottom:22px}}
@media(max-width:600px){.index{column-count:2;column-gap:18px}.thumb{margin-bottom:18px}}

/* Fondu enchaîné entre photos dans une série (comme la référence) */
.image-spread .frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .55s ease;z-index:0}
.image-spread .frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
@media(prefers-reduced-motion:reduce){.image-spread .frame{transition:none}}

/* Sélecteur de langue */
.lang-switch{display:flex;gap:14px}
.lang-opt{border:0;background:none;padding:0;margin:0;cursor:pointer;font-family:var(--type);font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--muted);line-height:1.4}
.lang-opt:hover{color:var(--ink)}
.lang-opt.active{color:var(--ink)}

/* Libellé Prev / Next qui suit le curseur */
.nav-hint{position:absolute;left:0;top:0;transform:translate(12px,-135%);pointer-events:none;opacity:0;transition:opacity .18s ease;font-family:var(--type);font-size:17px;letter-spacing:.04em;color:#fff;mix-blend-mode:difference;white-space:nowrap;z-index:3}
.nav-hint.show{opacity:1}
@media(hover:none){.nav-hint{display:none}}
@media(prefers-reduced-motion:reduce){.nav-hint{transition:none}}

/* Fongbe : police couvrant tous les caractères (ɔ ɛ ɖ ǎ …) pour une lecture homogène */
@font-face{font-family:"Gentium Book Plus";src:url("fonts/GentiumBookPlus-Regular.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Gentium Book Plus";src:url("fonts/GentiumBookPlus-Bold.ttf") format("truetype");font-weight:600 700;font-style:normal;font-display:swap}
:root[lang="fon"]{--type:"Gentium Book Plus","Cormorant Garamond",Georgia,serif}