@font-face{font-family:"Montserrat PAAR";src:url("/fonts/montserrat-paar.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-italique-latin-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-italique-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* L'italique reste la Montserrat d'origine (son « a » convient déjà) ; seul le romain utilise « Montserrat PAAR » */
i,em,.rot span{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
/* Mise en page : catalogue d'exposition — grandes images, colonne éditoriale, filets fins, blanc / noir / gris clair uniquement */
:root{
  --blanc:#ffffff; --noir:#111111; --gris:#e6e6e6; --gris-texte:#5c5c5c; --filet:#d0d0d0; --gris-fonce:#8a8a8a;
  --f:"Montserrat PAAR","Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gout:clamp(16px,4vw,56px); --max:1440px; --ph:50px; --in:6px; --lg:20px; --lbp:15px; --top:16px; --lp:16px; --nf:14px; --tb:2px; --hdr:calc(var(--ph) + 2 * var(--top));
  /* Échelle typographique unique : t1 titre de page · t2 titre de section · t3 grandes étapes · t4 sous-titre · lede chapeau · texte texte éditorial · courant texte de carte · label */
  --t1:clamp(34px,5.4vw,80px); --t2:clamp(28px,3.2vw,44px); --t3:clamp(24px,2.3vw,32px); --t4:21px;
  --t-lede:clamp(18px,1.6vw,22px); --t-texte:clamp(17px,1.35vw,19px); --t-courant:15px;
  --pill-bord:rgba(0,0,0,.08); --pill-survol:#f2f2f2; --noir-survol:#3a3a3a; --ombre:rgba(0,0,0,.45);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--blanc);color:var(--noir);font-family:var(--f);font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.01em;line-height:1.15;text-wrap:balance;margin:0;text-transform:lowercase}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--noir);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gout)}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gris-texte)}
.tbd{display:inline-block;font-size:.78em;font-weight:500;letter-spacing:.04em;color:var(--gris-texte);border:1px dashed var(--gris-fonce);padding:.05em .5em;border-radius:2px;white-space:nowrap}
.lede{font-size:var(--t-lede);line-height:1.55;font-weight:300;max-width:62ch}
/* liens d'action : texte en gras + flèche qui glisse au survol, sans soulignement */
.lien{display:inline-flex;gap:.6em;align-items:baseline;font-weight:500;text-decoration:none;transition:opacity .2s}
.lien:hover{opacity:.7}
/* flèches des liens : chevron fin dessiné en SVG, à la couleur du texte */
/* le chevron est posé sur la ligne de base puis centré sur la hauteur des minuscules (0,53 em en Montserrat), quelle que soit la taille du texte */
.chev{display:inline-block;width:6px;height:10px;position:relative;top:calc(5px - .265em);translate:var(--sx,0px) var(--sy,0px);transition:transform .3s;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;flex:none}
.chev.g{transform:scaleX(-1)}
.label .chev{top:calc(5px - .35em)} /* libellés en capitales : centré sur la hauteur des majuscules */
.lien:hover .chev{transform:translateX(4px)}
/* rythme vertical : une seule mesure entre sections (--sec), le pied de page compris */
:root{--sec:clamp(64px,9vw,128px);--pied:clamp(36px,3.4vw,48px)}
section{padding-block:var(--sec)}
.view > :last-child:not(.bandeau){padding-bottom:calc(var(--sec) - var(--pied)) !important;margin-bottom:0 !important}
.view > :last-child .pn,.recrut-txt p:last-child,.ml-txt p:last-child{margin-bottom:0}.ml .paire:last-child{padding-bottom:0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;margin-bottom:clamp(32px,4vw,56px);align-items:end}
.sec-head h2{font-size:var(--t2)}
.sec-head.solo{grid-template-columns:1fr}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}}

/* en-tête : une pastille blanche centrée ; logo noir à gauche, « contact » en bulle noire à droite (proportions reprises de la référence : pastille 50 px, bulle inscrite à 6 px du bord, texte 14 px, 32 px entre les mots) */
.hdr{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--top));left:0;right:0;z-index:60;pointer-events:none;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hdr.cache{transform:translateY(calc(-100% - var(--top) - env(safe-area-inset-top,0px) - 16px))}
.hdr .wrap{display:flex;justify-content:center;position:relative}
/* bulle de langue : même hauteur et même ombre que la barre, calée sur la marge droite */
/* bulle de langue : plus petite que la barre, centrée sur sa hauteur */
.hdr .langue{--lb:38px;position:absolute;right:var(--gout);top:0;bottom:0;margin-block:auto;width:var(--lb);height:var(--lb);justify-content:center;font-size:12.5px;font-weight:600;letter-spacing:.02em;pointer-events:auto;transition:background .2s}
.langue:hover{background:var(--pill-survol)}
.pill{pointer-events:auto;height:var(--ph);display:flex;align-items:center;background:var(--blanc);color:var(--noir);border-radius:999px;border:1px solid var(--pill-bord);box-shadow:0 12px 32px -18px var(--ombre)}
.barre{padding:0 calc(var(--in) - 1px);gap:0;max-width:100%}
.hdr .logo{height:calc(var(--ph) - 2 * var(--in));display:flex;align-items:center;padding-inline:var(--lbp) 8px;margin-right:4px;text-decoration:none;flex:none;transition:opacity .2s}
.hdr .logo:hover{opacity:.7}
/* logo : la bande des minuscules (hors jambage du p) est centrée optiquement dans la pastille */
.hdr .logo img{height:var(--lg);width:auto;display:block;transform:translateY(calc(var(--lg) * .17))}
.pied .logo{display:block;width:max-content}.pied .logo img{height:30px;width:auto}
.logo{text-decoration:none}
.nav a:not(.logo){height:calc(var(--ph) - 2 * var(--in));display:flex;align-items:center;padding:0 var(--lp) var(--tb);border-radius:999px;font-size:var(--nf);font-weight:500;line-height:1;letter-spacing:.005em;color:var(--noir);text-decoration:none;position:relative;overflow:hidden;white-space:nowrap;transition:background .2s}
.nav a .t{display:block;transition:transform .34s cubic-bezier(.5,0,.12,1)}
.nav a:not(.logo)::after{content:attr(data-t);position:absolute;inset:0 0 var(--tb);display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .34s cubic-bezier(.5,0,.12,1)}
.nav a:hover .t,.nav a:focus-visible .t{transform:translateY(calc(2 * var(--in) - var(--ph)))}
.nav a:not(.logo):hover::after,.nav a:not(.logo):focus-visible::after{transform:none}
.nav a:not(.logo):hover{background:var(--pill-survol)}
.nav a[aria-current="page"]{background:var(--gris)}
.nav a.cta{background:var(--noir);color:var(--blanc);font-weight:600;margin-left:4px;padding-inline:calc(var(--lp) + 2px)}
.nav a.cta:hover,.nav a.cta[aria-current="page"]{background:var(--noir-survol)}
@media (max-width:560px){:root{--ph:46px;--in:5px;--lg:17px;--lbp:12px;--top:12px;--lp:11px;--nf:13px}.hdr .logo{margin-right:0}.nav a.cta{margin-left:2px}}
@media (max-width:359px){:root{--lg:15px;--lbp:10px;--lp:8px;--nf:12.5px}}
/* petits écrans : barre à gauche, bulle à droite, dans le même rang (plus de chevauchement) */
@media (max-width:640px){.hdr .wrap{justify-content:space-between;gap:6px}.hdr .langue{position:static;flex:none;align-self:center;margin-block:0}}
@media (max-width:400px){:root{--lp:8px;--lbp:10px;--nf:12.5px}.hdr .wrap{gap:4px}.hdr .langue{--lb:36px}.hdr .logo{padding-right:5px;margin-right:0}.nav a.cta{margin-left:0}}
@media (max-width:375px){:root{--lp:6px;--lbp:9px;--nf:12px}}
@media (max-width:350px){:root{--ph:40px;--in:4px;--lp:4px;--lbp:7px;--nf:11px;--lg:13px}.hdr .langue{--lb:32px;font-size:11px}.hdr .logo{padding-right:3px}}
@media (max-width:640px){.hdr .langue{--lb:var(--ph)}} /* téléphone : bulle de langue au diamètre de la barre */
@media (prefers-reduced-motion:reduce){.nav a .t,.nav a::after{transition:none}.nav a:hover .t{transform:none}.nav a:hover::after{display:none}}

/* diaporama */
.slides{position:relative;height:min(100svh,66vw,960px);min-height:420px;overflow:hidden;background:var(--gris)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.02);transition:transform 9s linear}
.slide.on img{transform:scale(1)}
.slide img.m{display:none}
/* mobile et écrans verticaux : diaporama plein écran, passe aussi sous la barre d'état ; cadrage vertical par photo */
@media (max-width:820px),(orientation:portrait),(max-height:500px){
  .slides{height:100vh;height:calc(100svh + env(safe-area-inset-top,0px));min-height:0;margin-top:calc(-1 * env(safe-area-inset-top,0px));touch-action:pan-y}
  .sl-bas{bottom:calc(22px + env(safe-area-inset-bottom,0px));right:120px}
  .sl-titre{margin-right:-120px}
  .arrows{bottom:calc(18px + env(safe-area-inset-bottom,0px));gap:0}
  .shade{height:55%}
}
@media (orientation:portrait){
  .slide img{object-position:var(--mpos,var(--pos,50% 50%))}
  .slide img:not(.m){height:var(--mh,100%);position:relative;top:var(--mt,0)} /* téléphone : agrandir et remonter une photo pour placer l'œuvre plus haut */
  .slide.vm img:not(.m){display:none}
  .slide.vm img.m{display:block}
}
/* titre posé sur le diaporama, au-dessus de la légende */
.sl-bas{position:absolute;left:var(--gout);bottom:22px;right:140px;pointer-events:none}
.sl-bas .cap{pointer-events:auto}
.sl-titre{margin:0 -140px clamp(12px,1.4vw,18px) 0;text-wrap:balance;color:#fff;font-size:var(--t2);font-weight:500;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cap{position:static;color:#fff;font-size:12px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.55);max-width:60ch}
.cap b{font-weight:600;font-size:14px;display:block}
.arrows{position:absolute;right:var(--gout);bottom:18px;display:flex;gap:6px;align-items:center;color:#fff}
.arrows button{width:40px;height:40px;display:grid;place-items:center;font-size:20px;color:#fff;opacity:.8;transition:opacity .2s;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.arrows button:hover{opacity:1}
.count{font-size:12px;letter-spacing:.1em;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.18) 55%,transparent);pointer-events:none}

/* accroche */
.accroche{padding-block:calc(var(--sec) - 4px) 0}
.accroche h1{font-size:var(--t1);font-weight:500;line-height:1.08;letter-spacing:-.02em;max-width:16ch;text-transform:none}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.12em;line-height:1.12;margin-top:-.04em} /* marge négative : la boîte (1,12 em) ne doit pas agrandir l'interligne du titre (1,08) */
.rot span{grid-area:1/1;font-weight:300;font-style:italic;transform:translateY(105%);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.rot span.in{transform:none;opacity:1}
.rot span.out{transform:translateY(-105%);opacity:0}
.accroche .lede{margin-top:clamp(28px,3vw,44px);margin-left:auto;margin-right:0}
@media (min-width:900px){.accroche .lede{max-width:58ch;margin-left:38%}}

/* frise */
.frise{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.frise::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:var(--noir)}
.temps{position:relative;padding-top:40px;text-decoration:none;display:block}
.temps::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--blanc);border:1px solid var(--noir);transition:background .3s}
.temps:hover::before{background:var(--noir)}
.temps .label{display:block;margin-bottom:10px}
.temps h3{font-size:var(--t3);margin-bottom:14px}
.temps p{color:var(--gris-texte);font-size:var(--t-courant);max-width:36ch}
.temps .lien{margin-top:20px;font-size:14px}
/* survol du bloc entier, comme « vous êtes… » : le texte passe au noir, « en savoir plus » s'éclaircit et sa flèche glisse */
.temps p{transition:color .3s}
@media (hover:hover){.temps:hover p,.temps:focus-visible p{color:var(--noir)}.temps:hover .lien,.temps:focus-visible .lien{opacity:.7}.temps:hover .lien .chev,.temps:focus-visible .lien .chev{transform:translateX(4px)}}
@media (max-width:760px){
  .frise{grid-template-columns:1fr;gap:36px;padding-left:36px}
  .frise::before{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
  .temps{padding-top:0}.temps::before{left:-36px;top:6px}
}

/* vous êtes */
/* « vous êtes… » : chaque bloc a le même retrait des deux côtés ; la rangée déborde dans la marge de ce retrait,
   pour que le texte reste aligné sur la marge et que le fond gris du survol n'oblige pas à décaler le texte */
.profils{--pp:min(24px,var(--gout));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:calc(-1 * var(--pp));position:relative}
.profils::before{content:"";position:absolute;top:0;left:var(--pp);right:var(--pp);height:1px;background:var(--noir)}
.profil{padding:28px var(--pp) 32px;text-decoration:none;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--gris)}
.profil:last-child{border-right:0}
@media (min-width:1001px){.profil{padding-bottom:0}}
/* survol discret, comme les liens Instagram / LinkedIn : le lien du bas s'éclaircit légèrement et sa flèche glisse ; le texte passe au noir */
.profil .go{display:inline-flex;align-items:baseline;gap:.55em;transition:opacity .2s}
.profil p{transition:color .3s}
.profil .go i{font-style:normal;display:inline-block;transition:transform .3s}
@media (hover:hover){
 .profil:hover .go,.profil:focus-visible .go{opacity:.7}
 .profil:hover p,.profil:focus-visible p{color:var(--noir)}
 .profil:hover .go i,.profil:focus-visible .go i{transform:translateX(4px)}}

.profil h3{font-size:var(--t4)}
.profil p{color:var(--gris-texte);font-size:var(--t-courant);flex:1}
.profil .go{font-size:14px;font-weight:500}
@media (max-width:1000px){.profils{grid-template-columns:repeat(2,minmax(0,1fr))}.profil{border-bottom:1px solid var(--gris)}.profil:nth-child(2n){border-right:0}}
@media (max-width:560px){.profils{grid-template-columns:1fr}.profil{border-right:0}}

/* vignettes projets */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) 8px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.card .meta{flex-direction:column;align-items:flex-start;gap:1px;padding-bottom:8px}.card h3,.card .art{max-width:100%;font-size:11px}}
.card{text-decoration:none;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--gris);position:relative;max-width:100%}
.card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);filter:saturate(.45) contrast(1.02);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.card:hover .ph img,.card:focus-visible .ph img,.card.vu .ph img{filter:none}
/* survol : la vignette (cadre + titre) remonte de 6 px, l'image de 3 px seulement (léger décalage dans le cadre), et le titre roule comme ceux de l'en-tête */
.card h3{position:relative}
.card h3 .t{display:block;overflow:hidden;text-overflow:ellipsis;transition:transform .34s cubic-bezier(.5,0,.12,1)}
.card h3::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(100%);transition:transform .34s cubic-bezier(.5,0,.12,1)}
@media (hover:hover){
 .card:hover,.card:focus-visible{transform:translateY(-6px)}
 .card:hover .ph img,.card:focus-visible .ph img{transform:translateY(3px) scale(1.03)}
 .card:hover h3 .t,.card:focus-visible h3 .t{transform:translateY(-100%)}
 .card:hover h3::after,.card:focus-visible h3::after{transform:none}}
@media (prefers-reduced-motion:reduce){.card,.card .ph img,.card h3 .t,.card h3::after{transition:none}.card h3::after{display:none}}
.ph .vide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:13px;color:var(--gris-texte)}
/* format portrait 4:5, titre en petites capitales au-dessus de l'image (référence : vignettes éditoriales) */
.card .meta{padding-bottom:10px;display:flex;align-items:baseline;gap:10px;min-width:0;font-size:12px;line-height:1.3}
.card h3{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.fiche-top h1,.pn b{text-transform:none!important}
.card .art{font-size:12px;color:var(--gris-texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 10 auto;min-width:0}
@media (max-width:520px){.card .meta{gap:2px;padding-bottom:8px}.grid{row-gap:40px}} /* téléphone : titre et artiste collés à leur image, groupes bien séparés */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:11px;letter-spacing:.06em;text-transform:lowercase;border:1px solid var(--filet);padding:2px 8px;color:var(--gris-texte)}

/* pourquoi */
.raisons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.raison{border-top:1px solid var(--noir);padding-top:22px}
.raison h3{font-size:var(--t4);margin-bottom:12px}
.raison p{color:var(--gris-texte);font-size:var(--t-courant)}
@media (max-width:1000px){.raisons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.raisons{grid-template-columns:1fr}}

/* confiance */
.confiance{background:var(--gris)}
.noms{display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,64px);font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.01em}
.noms span{white-space:nowrap}

/* bandeau contact */
.bandeau{background:var(--noir);color:var(--blanc)}
.bandeau h2{font-size:clamp(32px,4.4vw,64px);max-width:18ch}
.bandeau .coords{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 48px;font-size:18px}
.bandeau a{color:var(--blanc);text-decoration:none;transition:opacity .2s}.bandeau a:hover{opacity:.7}
.bandeau .lien{border-color:var(--blanc)}

/* pages intérieures */
/* haut de page : environ deux hauteurs de pastille entre l'en-tête et le titre */
.phead{padding-block:calc(var(--hdr) + clamp(48px,5vw,72px)) clamp(32px,4vw,56px)}
.phead h1{font-size:var(--t1);font-weight:500;line-height:1.08;letter-spacing:-.02em}
/* grands titres : on compense l'approche de la première lettre pour que l'encre tombe sur la marge */
.phead h1,.accroche h1,.fiche-top h1{margin-left:-.045em}
.phead .lede{margin-top:24px}
.metier{scroll-margin-top:calc(var(--hdr) + 16px)}
.phead + .metier{padding-top:0}.phead + .metier::before{display:none} /* premier métier : même écart sous l'en-tête que sur les autres pages, sans filet */
/* Filets : aucun trait bord à bord. Dans les pages, tous les filets s'arrêtent aux marges du texte :
   noir pour ouvrir une section ou un bloc, gris clair pour séparer les éléments d'une liste ou un sous-bloc. */
.metier,.filet-haut{position:relative}
.metier::before,.filet-haut::before{content:"";position:absolute;top:0;height:1px;background:var(--noir);
  left:max(var(--gout),calc((100% - var(--max)) / 2 + var(--gout)));right:max(var(--gout),calc((100% - var(--max)) / 2 + var(--gout)))}
.metier-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 64px}
.metier h2{font-size:var(--t2)}
.metier .temps-l{display:block;margin-bottom:12px}
.metier .texte{font-size:var(--t-texte);line-height:1.65;font-weight:300;max-width:62ch}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px}
.cols h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gris-texte)}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{padding:9px 0;border-bottom:1px solid var(--gris);font-size:var(--t-courant)}
/* une seule liste : elle prend toute la largeur du texte, pour que chaque prestation tienne sur une ligne */
.cols>div:only-child{grid-column:1/-1;max-width:62ch}
/* « pour qui » sous le titre du métier, pas à côté des prestations */
.metier .pour{margin-top:18px;font-size:15px;line-height:1.6;color:var(--gris-texte);max-width:32ch}
@media (max-width:820px){.metier-grid,.cols{grid-template-columns:1fr}}
.etapes{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;counter-reset:e}
.etapes::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--noir)}
.etapes li{position:relative;counter-increment:e}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--blanc);border:1px solid var(--noir);font-weight:600;font-size:14px;margin-bottom:18px;position:relative}
.etapes h4{margin:0 0 8px;font-size:var(--t4);font-weight:500;letter-spacing:-.01em;line-height:1.15;text-transform:lowercase}
.etapes p{font-size:var(--t-courant);color:var(--gris-texte)}
@media (max-width:820px){.etapes{grid-template-columns:1fr;padding-left:56px}.etapes::before{top:0;bottom:0;left:19px;right:auto;width:1px;height:auto}.etapes li::before{position:absolute;left:-56px;top:-6px}}
.lies-projets{margin-top:56px}
.lies-projets h4{margin:0 0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gris-texte)}
.lies-projets .card h3{font-size:12px}
@media (max-width:900px){.lies-projets .card:nth-child(n+3){display:none}} /* grille à 2 colonnes : pas de 3e projet seul sur sa ligne */

.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filtres button{font-size:13px;border:1px solid var(--filet);padding:6px 14px;transition:background .2s,color .2s,border-color .2s}
.filtres button[aria-pressed="true"],.filtres button:hover{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.filtre-note{font-size:13px;color:var(--gris-texte);margin-bottom:40px}

/* fiche projet : un texte, puis les données du projet en liste fluide, puis la galerie */
.fiche-hero{position:relative;background:var(--gris)}
.fiche-hero img{width:100%;height:clamp(300px,calc(100svh - 290px),860px);object-fit:cover}
.fiche-hero .vide{height:min(60svh,640px);display:grid;place-items:center;color:var(--gris-texte)}
.credit{font-size:12px;color:var(--gris-texte);padding-top:10px}
.fiche-top{padding-block:48px 0}
/* fiches : titre et artiste visibles sans défiler */
@media (max-width:760px){.fiche-top{padding-block:28px 0}.fiche-hero img{height:clamp(240px,calc(100svh - 250px),640px)}}
.fiche-top h1{font-size:var(--t1);font-weight:500;line-height:1.08;letter-spacing:-.02em}
.fiche-top .art{font-size:var(--t-lede);line-height:1.55;margin-top:14px;font-weight:300}
.fiche-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 64px;margin-top:clamp(32px,4vw,56px)}
.fiche-corps .txt{display:grid;gap:1.1em;font-size:var(--t-texte);line-height:1.65;font-weight:300;max-width:64ch}
.fiche-corps .txt b{font-weight:600}
.fiche-corps .txt .nous{font-weight:inherit}
.donnees{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:28px 48px;margin:clamp(40px,4vw,56px) 0 0;padding-top:28px;border-top:1px solid var(--noir)}
.donnees dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gris-texte);margin-bottom:6px}
.donnees dd{margin:0;font-size:var(--t-courant);line-height:1.6;text-wrap:pretty}
@media (max-width:820px){.fiche-corps{grid-template-columns:1fr}}
/* galerie : images à leurs proportions, en colonnes ; clic = visionneuse */
.galerie{margin-top:var(--sec)}
.galerie .grille{display:flex;gap:16px;align-items:flex-start}
.galerie .gcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.galerie button{display:block;width:100%;margin:0;background:var(--gris);cursor:zoom-in;overflow:hidden}
.galerie button img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .3s}
.galerie button:hover img,.galerie button:focus-visible img{transform:scale(1.03)}
.galerie .vide{aspect-ratio:4/3;display:grid;place-items:center;color:var(--gris-texte);background:var(--gris)}
@media (max-width:560px){.galerie .grille,.galerie .gcol{gap:10px}}
/* visionneuse plein écran */
.lb{position:fixed;inset:0;z-index:100;background:#111;color:#fff;display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;transition:opacity .25s}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-haut{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gout) 8px;font-size:13px;letter-spacing:.08em}
.lb button{color:#fff;opacity:.75;transition:opacity .2s}
.lb button:hover,.lb button:focus-visible{opacity:1}
.lb-fermer{font-size:28px;line-height:1;width:44px;height:44px;margin-right:-10px}
.lb-scene{position:relative;touch-action:pan-y;min-height:0}
.lb-scene img{--m:clamp(8px,6vw,96px);position:absolute;top:0;bottom:0;left:var(--m);right:var(--m);margin:auto;max-width:calc(100% - 2 * var(--m));max-height:100%;width:auto;height:auto;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.lb-prec,.lb-suiv{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:72px;font-size:24px}
.lb-prec{left:max(4px,calc(var(--gout) - 16px))}.lb-suiv{right:max(4px,calc(var(--gout) - 16px))}
.lb-bas{padding:10px var(--gout) calc(env(safe-area-inset-bottom,0px) + 16px);font-size:12.5px;color:rgba(255,255,255,.7);min-height:44px}
.lb-bas b{color:#fff;font-weight:600;margin-right:.5em}
@media (max-width:560px){.lb-prec,.lb-suiv{display:none}.lb-scene img{--m:0px}}
body.lb-ouvert{overflow:hidden}
.pn{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--noir);margin-top:var(--sec);padding-top:24px}
.pn a{text-decoration:none;display:flex;flex-direction:column;gap:4px;max-width:45%}
.pn a:last-child{text-align:right;margin-left:auto}
.pn b{font-size:var(--t4);font-weight:500;letter-spacing:-.01em;line-height:1.15;text-transform:lowercase}

/* à propos */
/* même grille que les en-têtes de section (.sec-head) : la colonne de texte tombe pile sous le titre */
.paire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px}
.paire h2{font-size:var(--t2)}
.grande-photo img{width:100%;height:min(80svh,880px);object-fit:cover}
.approche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
@media (max-width:1000px){.approche{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.approche{grid-template-columns:1fr}.paire{grid-template-columns:1fr}}
.equipe{list-style:none;margin:0;padding:0;border-top:1px solid var(--noir)}
.equipe li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.55fr) minmax(0,1.05fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--gris);font-size:15px;align-items:baseline}
.equipe .nom{font-weight:600;font-size:17px}
.equipe .muted{color:var(--gris-texte)}
.collab{margin-top:40px}
.collab p{margin-top:10px;font-size:15px;color:var(--gris-texte)}
@media (max-width:820px){.equipe li{grid-template-columns:1fr;gap:2px}}

.recrut{margin-top:40px;border-top:1px solid var(--gris);padding-top:24px}
.recrut-txt{margin-top:10px;font-size:15px;line-height:1.6;color:var(--gris-texte)}
.recrut-txt p{margin:0 0 .8em}
.recrut-txt a{color:var(--noir);font-weight:500;text-decoration:none;white-space:nowrap}.recrut-txt a:hover{opacity:.6}
.ml{padding-bottom:clamp(64px,8vw,112px)}
.ml .paire{border-top:1px solid var(--gris);padding-block:24px 8px}
.ml .paire:first-child{border-top-color:var(--noir)}
.ml-txt{font-size:15px;line-height:1.6;max-width:72ch}
.ml-txt p{margin:0 0 .8em}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--noir);padding-top:32px}
.contact-grid .v{font-size:clamp(20px,2vw,26px);font-weight:500;margin-top:10px;line-height:1.35;word-break:break-word}
.contact-grid .v a{text-decoration:none;transition:opacity .2s}.contact-grid .v a:hover{opacity:.6}
.copy{margin-top:10px;font-size:12px;border:1px solid var(--filet);padding:4px 10px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* écran d'ouverture : logo gris balayé en blanc, synchronisé avec la barre du bas, puis le rideau noir se lève et l'en-tête descend */
.intro{position:fixed;inset:0;z-index:100;background:#0d0d0d;display:grid;place-items:center;transition:transform 1.05s cubic-bezier(.83,0,.17,1)}
.intro.leve{transform:translateY(-100%)}
.intro-logo{position:relative;width:max-content}
.intro-logo img{display:block;height:calc(var(--lg) * 1.3);width:auto;filter:invert(1);opacity:.22}
.intro-logo img[src=""],.intro-logo img:not([src]){visibility:hidden}
.intro-logo .plein{position:absolute;inset:0;opacity:1;clip-path:inset(0 100% 0 0)}

.intro.go .plein{clip-path:inset(0 0 0 0);transition:clip-path var(--d,1.8s) cubic-bezier(.45,0,.2,1)}
.intro-barre{position:absolute;left:0;right:0;bottom:0;height:5px;background:#fff;transform:scaleX(0);transform-origin:left}
.intro.go .intro-barre{transform:scaleX(1);transition:transform var(--d,1.8s) cubic-bezier(.45,0,.2,1)}
/* la barre s'efface en fondu dès que le rideau commence à se lever */
.intro.leve .intro-barre{opacity:0;transition:opacity .6s cubic-bezier(.25,.6,.4,1)}
.hdr.intro-hdr{transform:translateY(calc(-100% - var(--top) - env(safe-area-inset-top,0px) - 16px));transition:none}
.hdr.descend{transition:transform .9s cubic-bezier(.22,1,.36,1)}
body.intro-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){.intro{display:none}.hdr.intro-hdr{transform:none}}
/* ascenseur : barre fine qui flotte à droite (souris uniquement ; sur écran tactile, la barre native du système est déjà discrète) */
@media (pointer:fine){html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}}
.ascenseur{position:fixed;top:0;bottom:0;right:3px;width:10px;z-index:90;pointer-events:none;mix-blend-mode:difference;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
body.intro-on .ascenseur{opacity:0;transform:translateX(8px)}
body.intro-on .ascenseur i{pointer-events:none}
.ascenseur i{position:absolute;right:0;top:0;width:4px;border-radius:4px;background:#fff;pointer-events:auto;cursor:grab;transition:width .2s,opacity .3s;touch-action:none}
.ascenseur:hover i,.ascenseur i:hover,.ascenseur.tire i{width:6px}
.ascenseur.tire i{cursor:grabbing}
.ascenseur.vide{display:none}
body.lb-ouvert .ascenseur{display:none}
.maj{text-transform:none}
.nobr{white-space:nowrap}
/* pied */
.pied{padding-block:var(--pied) 0;font-size:14px}
.pied a{text-decoration:none;transition:opacity .2s}.pied a:hover{opacity:.6}
.pied-haut{display:flex;align-items:center;gap:20px 40px;padding-bottom:24px}
.pied .coord{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:0}
.pied .sep{color:var(--gris-texte)}
.reseaux{display:flex;gap:8px;flex:none}
.pied .bulle{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--pill-bord);background:var(--blanc);color:var(--noir);transition:background .2s}
.pied .bulle:hover{opacity:1;background:var(--pill-survol)}
.pied .bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;color:var(--gris-texte);font-size:12px;border-top:1px solid var(--gris);padding-block:12px 26px;line-height:1.4}
.pied .logo img{display:block}
.pied .bas a{color:inherit}
@media (max-width:980px){.pied-haut{flex-wrap:wrap}.pied .coord{order:3;flex-basis:100%;justify-content:flex-start}.reseaux{margin-left:auto}}
@media (max-width:560px){.pied .sep{display:none}.pied .coord{flex-direction:column;gap:4px}}

.view{animation:vin .6s ease both}
@keyframes vin{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .slide img{transform:none!important}
  html{scroll-behavior:auto}
}

/* site statique : la bulle de langue est un lien */
a.langue{text-decoration:none;color:var(--noir)}