@font-face{font-family:'Inter';src:url(inter.woff) format('woff');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(inter-italique.woff) format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'GG';src:url(gg.woff) format('woff');font-weight:200 400;font-display:swap}
@view-transition{navigation:auto}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
:root{
  --ink:#111;--grey:#9a9a9a;--rule:#e2e2e2;
  --xl:clamp(84.82px,6.7271vw,118.16px);   /* le chiffre et le mot Portfolio */
  --l:22px;    /* titre de projet */
  --m:13px;    /* corps de texte */
  --s:11.5px;  /* secondaire */
  --xs:10.5px; /* étiquette */
  --gut:clamp(22px,3.4vw,52px);--col:clamp(290px,23vw,404px);
  /* onglets : Golden Goose à un tiers du mot Portfolio, un peu plus grasse pour garder la même densité ;
     --ktab = distance ligne de base -> bas de la boîte à interligne 1 */
  --tab:calc(var(--xl) * .34);--ftab:'GG',Georgia,serif;--wtab:290;--ktab:.2435;
  --g:clamp(12px,1.25vw,18px);   /* ligne de base -> filet, identique pour les quatre onglets */
  --ogap:clamp(10px,1.1vw,16px); /* coupure entre les segments du filet */
  --pt:clamp(40px,7vh,90px);  /* respiration sous l'en-tête, couverture et Infos & CV */
  /* hauteur du cadre : l'écran moins l'en-tête, la respiration, la légende et le pied de page */
  --hc:clamp(280px,calc(100svh - clamp(26px,4.4vh,54px) - var(--xl) * .7565 - var(--g) - 1px - var(--pt) - 125px),760px);
  --c1:calc(var(--col) + clamp(30px,5vw,80px)); /* colonne du mot Portfolio */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font-family:'Inter',system-ui,sans-serif;
     font-size:var(--m);line-height:1.6;padding:0 var(--gut);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* en-tête : quatre onglets posés sur une même ligne de base, un filet découpé en quatre */
.tete{padding-top:clamp(26px,4.4vh,54px);view-transition-name:tete}
.onglets{display:grid;grid-template-columns:var(--c1) repeat(3,minmax(0,1fr));
         column-gap:var(--ogap);align-items:end}
.og{display:block;border-bottom:1px solid var(--rule);transition:border-color .25s ease}
.og span{display:block;line-height:1;white-space:nowrap;font-family:var(--ftab);font-weight:var(--wtab);
         font-size:var(--tab);letter-spacing:.005em;margin-bottom:calc(var(--g) - var(--ktab) * 1em)}
.og-p span{font-family:'GG';font-weight:240;font-size:var(--xl);letter-spacing:.005em;
           margin-left:-.075em;margin-bottom:calc(var(--g) - .2435em)}
.og:hover,.og[aria-current]{border-bottom-color:var(--ink)}
.og:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* couverture et Infos & CV : la même colonne de gauche, au même endroit sur les deux pages,
   nommée pour la transition afin qu'elle reste immobile quand on passe de l'une à l'autre */
body.accueil{min-height:100svh;display:flex;flex-direction:column}
body.accueil .couv{flex:1;padding-bottom:40px}
.couv{display:grid;grid-template-columns:var(--c1) repeat(3,minmax(0,1fr));column-gap:var(--ogap);
      align-items:start;padding:var(--pt) 0 clamp(64px,10vh,120px)}
.gauche{grid-column:1;min-height:var(--hc);display:flex;flex-direction:column;justify-content:space-between;
        gap:32px;padding-right:clamp(12px,2vw,32px)}
.qui{font-size:var(--m);line-height:1.6;view-transition-name:qui}
.qui span{display:block}
.qui .nom{font-weight:500}
.presente{font-size:var(--m);line-height:1.62;max-width:30em;view-transition-name:presente}
.presente p + p{margin-top:.8em}
.c-vue{grid-column:2 / 5;position:relative;margin:0}
.cadre{display:block;position:relative;height:var(--hc);width:100%;overflow:hidden;background:#fff}
.cadre img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;
           object-position:left bottom;opacity:0;transition:opacity .9s ease}
.cadre img.vu{opacity:1}
.cadre:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.photo{grid-column:2;margin:0}
.photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.infos .cv{grid-column:3 / 5}

/* liste */
.index{padding-top:clamp(8px,1.4vh,16px);padding-bottom:clamp(30px,5vh,60px)}
.sect{font-size:var(--xs);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
      padding:24px 0 8px}
.ligne{display:grid;grid-template-columns:3.6rem minmax(0,24.5em) minmax(0,1fr);
       column-gap:clamp(20px,2.4vw,40px);align-items:start;padding:20px 0;
       border-top:1px solid var(--rule);transition:opacity .3s ease;
       margin-right:calc(-1 * var(--gut))}
.index > .ligne:first-child{border-top:none}
.num{font-family:'GG';font-weight:260;font-size:30px;line-height:1;color:var(--grey);
     transition:color .3s ease;padding-top:2px}
.tit{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
h2{font-size:var(--l);font-weight:500;letter-spacing:-.012em;line-height:1.16}
.an,.prog{font-size:var(--s);color:var(--grey);line-height:1.5}
.prog{margin-top:7px}
.princ{font-size:var(--s);line-height:1.5;color:var(--ink);margin-top:5px}
.vues{display:flex;gap:8px;overflow:hidden;max-height:150px;
      mask-image:linear-gradient(to right,#000 92%,transparent 100%)}
.vues img{height:150px;width:auto;flex:none}
a.ligne:hover .num{color:var(--ink)}
a.ligne:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
body.entree .ligne,body.entree .sect{animation:monte .34s cubic-bezier(.22,.7,.3,1) backwards}

/* projet déplié */
.ouvert{display:block;margin-right:0;padding:0;border-top:1px solid var(--rule);
        scroll-margin-top:clamp(90px,14vh,170px)}
.open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:var(--gut);
      align-items:stretch;padding:clamp(34px,5vh,64px) 0 clamp(30px,4.4vh,56px)}
.ident{align-self:start;display:grid;grid-template-rows:auto 1fr;grid-template-columns:var(--numcol,clamp(126px,17vw,238px)) minmax(0,1fr);
       column-gap:clamp(16px,2.2vw,34px)}
.bignum{grid-row:1 / span 2;grid-column:1;align-self:start;font-family:'GG';font-weight:230;
        font-size:clamp(104px,15vw,210px);line-height:.78;margin-top:.0705em;margin-left:-.01em}
.bignum.rom{margin-top:.0575em}
/* titre : le haut des capitales d'Inter sur la même ligne (calé à l'écran : 0,149 em sous le haut de la boîte) */
.meta h1{margin-top:-.149em}
.meta{grid-row:1;grid-column:2}
.corps{grid-row:2;grid-column:2;margin-top:16px}
h1{font-size:clamp(26px,2.9vw,38px);font-weight:500;letter-spacing:-.015em;
   line-height:1.1;margin-bottom:18px}
.faits{list-style:none}
.faits li{font-size:var(--s);line-height:2;color:var(--grey)}
.corps p{font-size:var(--m);line-height:1.62;text-align:justify;hyphens:auto;margin-bottom:13px}
.corps p:last-child{margin-bottom:0}
.plaque{position:relative}
.plaque .dedans{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px}
.plaque figure{flex:1;display:flex;flex-direction:column;min-height:0;margin:0}
.plaque figure:last-child:not(:first-child){flex:1.55}
.plaque .boite{display:block;flex:1;min-height:0;line-height:0}
.plaque .boite img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left top}

/* documents : trois largeurs, une seule règle */
.docs{padding-bottom:clamp(36px,5vh,70px)}
.docs figure{margin:0 0 clamp(46px,6vw,86px)}
.docs figure:last-child{margin-bottom:0}
.w1{max-width:90%}
.w2{max-width:58%}
.w3{max-width:46%}
.docs figure{width:100%}
.docs .seule{width:fit-content;margin-left:auto;margin-right:auto}
.docs img{max-height:82vh}
.rangee img,.colonne img,.duo img{max-height:74vh}
.duo .pile{justify-content:flex-start}
.duo{align-items:flex-start}
.duo .coupes{align-self:stretch}
.duo .coupes > figure{height:100%;display:flex;flex-direction:column;justify-content:space-between}
.duo .coupes img{max-height:none}
.hplan{display:flex;justify-content:center}
.hplan img{height:46vh;width:auto;max-height:none}
.duo .pile > figure + figure{display:flex;justify-content:center;height:42vh;align-items:flex-start}
.duo .pile > figure + figure img{height:42vh;width:auto;max-height:none}
.duo .pile .soustexte{margin-top:18px}
.duo .pile .soustexte + .soustexte{margin-top:16px}

.soustexte{font-size:var(--s);line-height:1.55;color:var(--ink);margin-top:12px}
.soustexte b{font-weight:500}
.docs img{mix-blend-mode:multiply}
figcaption{margin-top:10px;font-size:var(--s);line-height:1.5;color:var(--grey)}
.rangee{display:flex;gap:clamp(14px,1.8vw,28px);align-items:flex-start}
.rangee img{flex:1 1 0;min-width:0;object-fit:contain;object-position:left top}
.colonne{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,28px)}
.duo{display:flex;gap:clamp(20px,2.4vw,40px);align-items:flex-start;
     margin-bottom:clamp(46px,6vw,86px)}
.duo.inter{width:90%;margin-left:auto;margin-right:auto;gap:24px;justify-content:space-between}
.duo.inter .pile{flex:none}
.duo.inter img{width:100%;height:auto;max-height:none}
.duo.inter .hplan,.duo.inter .pile > figure + figure{display:block;height:auto}
.duo.inter .pile > figure + figure{display:block;height:auto}
.duo.inter .pile > figure + figure img{width:100%;height:auto;max-height:none}
/* coupe du promontoire : même taille que le collage (rapport des deux colonnes), calée à droite sous son plan */
.duo.inter .pile > figure.c-prom img{width:86.277%;margin-left:auto}
.duo .pile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
           gap:clamp(30px,3.6vw,54px)}
.duo figure{margin:0}

/* pages secondaires */
.page{padding:clamp(28px,4vh,48px) 0 clamp(40px,6vh,80px)}
.page h1{margin-bottom:14px}
.intro{font-size:var(--s);line-height:1.62;color:var(--grey);max-width:44em;
       margin-bottom:clamp(30px,4vh,50px)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
        align-items:start;gap:clamp(30px,3.4vw,56px)}
.grille .mq{display:block}
.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
      gap:clamp(30px,4vw,70px);align-items:start}
.lead p{font-size:var(--m);line-height:1.66;color:var(--ink);margin-bottom:12px;max-width:40em}
.portrait{margin-top:clamp(26px,3.4vw,40px);width:clamp(170px,40%,250px);aspect-ratio:3/4;
          border:1px dashed var(--rule);display:flex;align-items:center;justify-content:center;
          text-align:center;font-size:var(--s);color:var(--grey);padding:14px}
.cv-sec{margin:0;padding-bottom:7px;border-bottom:1px solid var(--ink);font-size:var(--xs);
        letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cv-sec:not(:first-child){margin-top:34px}
.cv-row{display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:16px;
        padding:10px 0;border-bottom:1px solid var(--rule)}
.cv-row .y{font-family:'GG';font-weight:260;font-size:15px;color:var(--grey);line-height:1.4}
.cv-row .l{font-size:var(--m);line-height:1.45}
.cv-row .d{display:block;font-size:var(--s);line-height:1.5;color:var(--grey);margin-top:3px}

.pied{border-top:1px solid var(--ink);padding:18px 0 26px;display:flex;
      justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--s);color:var(--grey)}
.pied a:hover{color:var(--ink)}

@media (max-width:1100px){
  .ligne{grid-template-columns:3rem minmax(0,1fr)}
  .vues{grid-column:2;margin-top:14px;max-height:120px}
  .vues img{height:120px}
  .w2,.w3{width:100%}
}
@media (max-width:860px){
  :root{--xl:min(84.82px,19vw);--tab:clamp(16px,4.8vw,26px)}
  .onglets{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(18px,4vw,28px)}
  .og-p{grid-column:1 / -1}
  .couv{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-top:28px}
  body.accueil .couv{padding-bottom:40px}
  .gauche{display:contents}
  .couv > *,.gauche > *,.infos .cv{grid-column:1}
  .qui{order:1}.c-vue{order:2}.presente{order:3}.photo{order:4}.cv{order:5}
  .cadre{height:auto;aspect-ratio:7/5}
  .presente{max-width:34em}
  .photo{width:min(62%,280px)}
}
@media (max-width:880px){
  .open{grid-template-columns:1fr;gap:clamp(28px,5vw,48px)}
  .plaque .dedans{position:static}
  .plaque .boite img{height:auto;width:100%}
  .duo,.rangee{flex-direction:column}
  .corps p{text-align:left;hyphens:manual}
  .info{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ligne{grid-template-columns:2.4rem minmax(0,1fr);column-gap:14px;padding:18px 0}
  .num{font-size:24px}
  h2{font-size:19px}
  .vues{max-height:96px}.vues img{height:96px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  @view-transition{navigation:none}}

/* planches : deux colonnes égales, même gouttière horizontale et verticale */
.planches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);
          margin-bottom:clamp(46px,6vw,86px)}
.planches:last-child{margin-bottom:0}
/* plaque à deux images de même largeur : chaque figure part de sa hauteur à pleine largeur
   et rétrécit en proportion si le texte est plus court ; sinon elles se serrent en haut */
.plaque{container-type:inline-size}
.planches img{display:block;width:100%;height:auto;max-height:none}
.planches .pile2{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,40px)}
.planches .cote{position:relative}
.planches .cote img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left top}
@media (max-width:880px){
  .planches{grid-template-columns:minmax(0,1fr)}
  .planches .cote img{position:static;height:auto}
}

/* grilles de documents : une seule gouttière et un seul écart entre blocs */
:root{--gg:clamp(20px,2.4vw,40px);--mb:clamp(46px,6vw,86px)}
.egale{display:flex;gap:var(--gg);align-items:flex-start;margin-bottom:var(--mb)}
.egale img{min-width:0;width:auto;height:auto;max-height:none}
.persp{display:grid;gap:var(--gg);align-items:start;margin-bottom:var(--mb)}
.persp img{display:block;width:100%;height:auto;max-height:none}
.persp .pile2{display:flex;flex-direction:column;gap:var(--gg)}
.details{display:flex;flex-direction:column;align-items:center;gap:var(--gg)}
.details img{width:min(100%,calc((100svh - 120px) * 1.4142));height:auto;max-height:none}
@media (max-width:880px){
  .egale{flex-direction:column}
  .egale img{width:100%}
  .persp{grid-template-columns:minmax(0,1fr)!important}
}

/* agrandissement des images, pages projet seulement */
.ouvert .plaque img,.ouvert .docs img{cursor:pointer}
.lb{position:fixed;inset:0;z-index:100;background:#fff;display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;padding:14px var(--gut) 16px}
.lb[hidden]{display:none}
.lb-haut,.lb-bas{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--s);color:var(--ink)}
.lb button{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:4px 0 3px;
           cursor:pointer;transition:border-color .25s ease}
.lb button:hover,.lb button:focus-visible{border-bottom-color:var(--ink);outline:none}
.lb-cpt{font-family:'GG';font-weight:260;font-size:17px;color:var(--ink)}
.lb-vue{min-height:0;display:flex;align-items:center;justify-content:center;padding:10px 0;cursor:pointer}
.lb-vue img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* titre du projet ouvert : il referme le projet */
.meta h1 a{color:inherit;text-decoration:none;transition:color .25s ease}
.meta h1 a:hover,.meta h1 a:focus-visible{color:var(--grey);outline:none}
.index > a.ligne[id]{scroll-margin-top:clamp(90px,14vh,170px)}

/* séries : images d'un même ensemble à la même hauteur, gouttière serrée ; colonnes calculées dans la page */
:root{--gs:12px}
.serie{display:grid;column-gap:var(--gs);align-items:start;margin-bottom:var(--mb)}
.serie img,.bloc2 img{display:block;width:100%;height:auto;max-height:none}
.serie .pile3,.bloc2 .pile3{display:flex;flex-direction:column;gap:var(--gs)}
.serie.batiment{margin-top:var(--mb)}
.bloc2{display:grid;column-gap:var(--gg);align-items:start;margin-bottom:var(--mb)}
.bloc2 .pile2{display:flex;flex-direction:column;gap:var(--gg)}
@media (max-width:880px){
  .serie{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:var(--gs)}
  .bloc2{grid-template-columns:minmax(0,1fr)!important;row-gap:var(--gg)}
}

/* aucun document ne dépasse 60 % de la hauteur de l'écran (largeur bornée dans la page, rangée centrée) */
:root{--hmax:60svh}
.une{margin-bottom:var(--mb)}
.une img{display:block;width:100%;height:auto;max-height:none}

/* toute rangée plus étroite que la page est centrée */
.docs figure.w1,.docs figure.w2,.docs figure.w3{margin-left:auto;margin-right:auto}

/* Dehlingen : mêmes colonnes que le texte et la photo d'entrée */
.dh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);column-gap:var(--gut);row-gap:var(--gg)}
.dh img{display:block;height:auto;max-height:none}
@media (max-width:880px){.dh{grid-template-columns:minmax(0,1fr)}.dh img{margin-left:auto!important;margin-right:auto}}

/* documents « un peu plus grands » : 75 % de la hauteur d'écran */
:root{--hgrand:75svh}
/* page Maquettes : lignes de quatre ; une photo verticale prend la hauteur d'une photo horizontale
   (format des photos de maquette, 1100 × 786) et se centre dans son emplacement */
.grille{grid-template-columns:repeat(4,minmax(0,1fr))}
.grille .mq.v{aspect-ratio:1100/786;display:flex;justify-content:center}
.grille .mq.v img{height:100%;width:auto;max-width:100%}
@media (max-width:900px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pied de page sur deux lignes */
.pied{align-items:flex-start}
.pied > div{display:flex;flex-direction:column;gap:2px}
.pied .pied-d{display:grid;grid-template-columns:auto auto;column-gap:1.3em;row-gap:2px;justify-content:end}
.pied .sy{color:var(--grey);text-align:center}
/* CV : une ligne par outil ; la photo prend la hauteur du texte à sa gauche */
.cv-row .di{color:var(--grey)}
.duoinfo{grid-column:1 / 3;display:grid;grid-template-columns:subgrid;align-items:start}
.duoinfo .photo{align-self:stretch;position:relative}
.duoinfo .photo img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:100%;aspect-ratio:auto;object-fit:cover}
@media (max-width:860px){
  .duoinfo{display:contents}
  .duoinfo .photo img{position:static;height:auto;width:100%;aspect-ratio:3/4}
}

/* Au bord du canal : deux colonnes de l'ouverture (texte + maquette | référence + axonométrie), tailles posées par le script de la page */
.open.canal{align-items:start}
.ouvert .open.canal img{cursor:pointer}
.open.canal img{display:block;max-width:100%;height:auto;max-height:none}
.open.canal .col-d{display:flex;flex-direction:column;gap:var(--gs)}
.open.canal .c-ref{width:100%}
.open.canal .c-axo{width:min(100%, 75svh * 0.7071);margin-left:auto;margin-right:auto}
.open.canal .c-mq{margin-top:var(--gg);margin-left:calc(clamp(126px,17vw,238px) + clamp(16px,2.2vw,34px));
                  width:calc(100% - clamp(126px,17vw,238px) - clamp(16px,2.2vw,34px))}
@media (max-width:880px){.open.canal .c-mq{margin-left:0;width:100%}}