.portfolio{padding:150px max(5.3vw,24px) 90px;overflow:hidden}.portfolio-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:7vw;margin-bottom:65px}.portfolio h1{font-size:clamp(65px,7.8vw,120px);line-height:.96;letter-spacing:-.065em;margin:22px 0}.portfolio em{font-style:normal;color:#ff7526}.portfolio-lead{position:relative;padding:40px 40px 40px 0}.portfolio-lead>p{position:relative;z-index:1;font-size:20px;line-height:1.55;max-width:440px;text-align:justify}.portfolio-ribbon{position:absolute;width:400px;height:500px;right:-220px;top:-120px;pointer-events:none;transform:translateY(var(--ribbon-y,0px)) rotate(var(--ribbon-r,0deg));transition:transform .15s linear}.portfolio-ribbon path{fill:none;stroke:#ff7526;stroke-width:100;stroke-linecap:round}.portfolio-tools{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:25px}.portfolio-filters{display:flex;gap:10px;flex-wrap:wrap}.portfolio-filters button{border:1px solid #12394355;background:transparent;padding:13px 23px;border-radius:40px;cursor:pointer;color:#123943;font:inherit;transition:background .25s,color .25s}.portfolio-filters button[aria-pressed=true]{background:#125469;color:#fff}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px}.work-card:first-child{grid-column:1/-1}.work-card[hidden]{display:none}.portfolio-grid.filtered .work-card{grid-column:auto}.work-visual{border:0;display:block;width:100%;aspect-ratio:1.42;position:relative;overflow:hidden;border-radius:3px;background:#123a45;cursor:pointer;padding:0;isolation:isolate;clip-path:inset(13% 0 13% 0 round 65px);opacity:0;transition:clip-path 1s cubic-bezier(.2,.7,.2,1),opacity .6s}.work-card.visible .work-visual{clip-path:inset(0 round 3px);opacity:1}.work-card:first-child .work-visual{aspect-ratio:2.35}.portfolio-grid.filtered .work-visual{aspect-ratio:1.42}.work-visual>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.work-visual.sillon-visual{background:radial-gradient(ellipse at 70% 90%,#226778,transparent 65%),#101719}.sillon-visual>img{object-fit:contain;padding:18%;}.work-open{position:absolute;right:32px;top:35px;color:ivory;font-size:16px;opacity:0;transform:translateY(-10px);transition:.35s}.work-index{position:absolute;bottom:22px;left:25px;color:white;mix-blend-mode:difference;font-size:12px;letter-spacing:.1em}.work-caption{padding-top:17px}.work-caption h2{font-size:25px;letter-spacing:-.045em;margin:0 0 7px}.work-caption p{margin:0;font-size:14px;color:#526060}.gallery-count{margin-top:40px;font-size:12px}.work-viewer{width:min(1100px,94vw);max-height:94vh;border:0;padding:28px;background:#f8f5ed;color:#101719}.work-viewer::backdrop{background:#07171dea;backdrop-filter:blur(8px)}.work-viewer[data-theme=dark]{background:#101719;color:#f8f5ed}.work-viewer>img{width:100%;height:min(65vh,650px);object-fit:contain;display:block}.viewer-close{position:absolute;right:15px;top:12px;background:#f8f5ed;color:#101719;border:0;border-radius:50%;width:42px;height:42px;font-size:28px;cursor:pointer}.work-viewer h2{font-size:28px;margin-bottom:10px}.work-viewer p{font-size:13px}.portfolio button:focus-visible{outline:3px solid #ff7526;outline-offset:4px}@media(max-width:800px){.portfolio-intro{grid-template-columns:1fr;gap:0}.portfolio h1{font-size:75px}.portfolio-lead{padding:10px 0}.portfolio-lead>p{font-size:17px;max-width:90%}.portfolio-ribbon{right:-280px;top:-220px;opacity:.4}.portfolio-tools{display:block}.portfolio-grid{gap:30px 15px}.work-caption h2{font-size:20px}.portfolio{padding-top:115px}}@media(max-width:550px){.portfolio-grid{grid-template-columns:1fr}.work-card:first-child .work-visual{aspect-ratio:1.3}.portfolio-filters button{padding:10px 15px}.portfolio h1{font-size:64px}}@media(prefers-reduced-motion:reduce){.work-visual{clip-path:none;opacity:1}.portfolio *{transition:none!important}.portfolio-ribbon{transform:none}}
.portfolio-ribbon{overflow:visible}

/* Gentle image movement inside the composition, without moving its caption. */
.work-visual>img{transform:translateY(var(--photo-shift,0px)) scale(1.055);transition:transform .7s cubic-bezier(.2,.7,.2,1)}





.sillon-visual>img{transform:none}.sillon-visual:hover>img{transform:scale(1.035)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.work-visual>img,.work-visual:hover>img{transform:none}}

/* LA VAGUE AU SURVOL — repris des cartes d'expertise de l'accueil, mêmes
   valeurs, même courbe. La tache naît sous le pointeur et s'étale ; le libellé
   arrive dessus. On ne masque plus la photo par un aplat posé dans un coin :
   la couleur vient de la main du visiteur et s'en va avec elle. */
.liquid-clip{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.liquid{position:absolute;left:var(--lx,50%);top:var(--ly,60%);
  width:var(--diameter,1200px);height:var(--diameter,1200px);
  margin-left:calc(var(--diameter,1200px)/-2);margin-top:calc(var(--diameter,1200px)/-2);
  border-radius:43% 57% 54% 46% / 55% 44% 56% 45%;
  transform:scale(0) rotate(-18deg);
  background:radial-gradient(ellipse at 32% 28%,#ff9836e8,#ff711fea 53%,#f95b19f5);
  box-shadow:inset 1px 2px 2px #ffe4a655,inset -1px -3px 5px #a7411240;
  transition:transform .78s cubic-bezier(.2,.65,.2,1),border-radius 1.1s;will-change:transform}
.work-visual.vague-active .liquid{transform:scale(1) rotate(8deg);border-radius:52% 48% 46% 54% / 44% 56% 44% 56%}
@media(prefers-reduced-motion:reduce){.liquid{transition:none}}



.work-visual.vague-active>img{transform:translateY(var(--photo-shift,0px)) scale(1.055)}

/* LA DENSITÉ DE LA PAGE — alignée sur celle de l'accueil.

   Deux colonnes de 630 px et une vedette pleine largeur : les vignettes
   faisaient le double des cartes d'expertise de l'accueil (437 px), la page se
   lisait comme une succession d'affiches. On passe à TROIS colonnes au même
   pas que l'accueil, sans vedette : cinq projets ou vingt, la page garde le
   même rythme que le reste du site. */
.portfolio-grid{grid-template-columns:repeat(3,1fr);gap:52px 22px}
.work-card:first-child{grid-column:auto}
.work-card:first-child .work-visual{aspect-ratio:1.42}
.portfolio-grid.filtered{grid-template-columns:repeat(3,1fr)}

/* LE LIBELLÉ EST VISIBLE, toujours. Caché dans l'image, il n'existait que pour
   qui survolait — donc pour personne sur un écran tactile, et pour personne qui
   balaie la page des yeux. Il est sous le titre, comme les liens de texte du
   reste du site. */
.work-open{position:static;display:inline-block;opacity:1;transform:none;
  margin-top:14px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:inherit;
  background:none;padding:0;text-decoration:underline;text-underline-offset:7px;
  text-decoration-thickness:1px;text-decoration-color:#ff7526;transition:color .25s}
.work-card:hover .work-open,.work-visual:focus-visible ~ .work-caption .work-open{color:#ff7526}

/* la vague met un peu plus de temps : sur une vignette plus petite, .78s
   claquait au lieu de couler */
.liquid{transition:transform 1.15s cubic-bezier(.2,.65,.2,1),border-radius 1.4s}

@media(max-width:1100px){.portfolio-grid,.portfolio-grid.filtered{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.portfolio-grid,.portfolio-grid.filtered{grid-template-columns:1fr}}





@media(max-width:700px){}

/* les images s'arrondissent comme partout ailleurs : 12px, la valeur des
   photos de /expertises, la plus employée du site (les vignettes étaient à 3) */
.work-visual{border-radius:12px}
.work-card.visible .work-visual{clip-path:inset(0 round 12px)}
.work-card.visible .work-visual:hover,.work-card.visible .work-visual:focus-visible{clip-path:inset(0 round 12px)}





/* LE HAUT DE PAGE — centré. Le titre sur deux lignes, le chapeau dessous, plus
   large et centré lui aussi. C'était une grille en deux colonnes, titre à
   gauche et chapeau à droite : ça lisait comme une page d'article, pas comme
   l'entrée d'un fonds de travaux. */
.portfolio-intro{display:block;text-align:center;padding:26px 5.3% 46px;max-width:1520px;margin:auto}
.portfolio-intro h1{font-size:clamp(36px,4.6vw,70px);letter-spacing:-.05em;line-height:1.06}
.portfolio-intro .eyebrow{justify-content:center;display:block}
.portfolio-intro h1{margin:16px auto 0;max-width:none}
.portfolio-intro .portfolio-lead p{margin:26px auto 0;max-width:720px;font-size:18px;line-height:1.62;text-align:center}
@media(max-width:700px){.portfolio-intro{padding:14px 6% 28px}}
.portfolio-intro .portfolio-lead{display:block}
/* le ruban décoratif n'a plus de colonne où vivre */
.portfolio-ribbon{display:none}

/* LES FILTRES — centrés et sobres. Ils étaient alignés à gauche, collés au
   bord, et se lisaient comme une barre d'outils. */
.portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 44px;padding:0}
.portfolio-filters button{font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  padding:11px 20px;border-radius:30px;border:1px solid #12546930;background:none;color:inherit;
  transition:background .22s,border-color .22s,color .22s}
.portfolio-filters button:hover{border-color:var(--orange,#ff7526)}
.portfolio-filters button[aria-pressed="true"]{background:var(--ink,#101719);border-color:var(--ink,#101719);color:var(--ivory,#f8f5ed)}
.portfolio-filters button:focus-visible{outline:2px solid var(--orange,#ff7526);outline-offset:3px}
.portfolio-tools{display:block}

/* Le haut de page descendait trop bas : 150 px de retrait sous un en-tête qui
   en fait 72, plus le retrait de l'intro. Jonas, 2026-09-13 : « remonte le
   héros, le texte est beaucoup trop bas. » */
.portfolio{padding-top:104px}
@media(max-width:800px){.portfolio{padding-top:84px}}