/* =========================================================
   MADYGOOD — projet.css — la page projet « séquence » (validée par Anthony le 18 oct. 2026)
   Chargée après typography.css et accueil.css. Une page aérienne : chaque photo a sa scène ; la photo d'ouverture et les plein écran
   s'agrandissent au scroll (c'est la photo ENTIÈRE qui grandit, d'un petit cadre au plein écran) ; les textes restent en place pendant que
   les photos défilent ; une galerie épinglée défile à l'horizontale ; une bande paysage se pose dans la page.
   Les photos sont inertes (ni survol, ni clic) : seul le scroll les fait bouger. Tout est carré, sans ombre, sans filet.
   Le mouvement vient de js/scenes.js, qui pose --e (0 → 1, avancement adouci d'une scène) et --tx (décalage de la galerie).
   --z (zoom) et --f (point de cadrage) sur une <img> : le cadrage d'une scène ou d'une photo de remplacement.
   ========================================================= */

/* ---------- Briques communes ---------- */
.pj-back{border-bottom:1px solid currentColor;padding-bottom:2px}
.pj-fiche dt{margin-bottom:6px;color:var(--graphite)}
.pj-fiche dd{font-size:15px;line-height:1.35}
.pj-fiche a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* prestations : lien vers l'expertise (maillage interne) */

.pj .foot{border-top:1px solid rgba(237,235,231,.14)}
.js .p-lit .w{opacity:.16;transition:opacity .7s var(--ease)}
.js .p-lit .w.is-on{opacity:1}

/* ---------- La phrase du projet ---------- */
.v-punch{
  grid-column:1 / -1;max-width:12em;text-wrap:balance;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(44px,8.4vw,150px);line-height:.98;letter-spacing:-.04em;
}

/* ---------- Une photo : une image, rien d'interactif (ni survol, ni clic) ---------- */
.m-f{margin:0}
.m-ph{display:block;position:relative;overflow:hidden;background:var(--paper-hi);aspect-ratio:var(--ar,9 / 16)}   /* --ar : proportions propres à une photo */
.m-ph img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}

/* apparition : le rideau se lève de bas en haut (comme la grille de l'accueil) */
.js .m-f.fx .m-ph{clip-path:inset(100% 0 0 0)}
.js .m-f.fx.in .m-ph{clip-path:inset(0);transition:clip-path 1.25s var(--ease-bd) var(--d,0ms)}

/* ---------- Projet suivant : le diptyque (d'après l'inspiration d'Anthony) ----------
   Le nom en grand, deux grandes photos côte à côte presque collées, le texte réduit aux coins ; tient dans un écran.
   Seul le texte est un lien (le nom) : la photo n'est ni survolable ni cliquable. Pas de filet, pas d'ombre, rien sur la photo. */
.sn{--sn-gap:clamp(8px,.8vw,12px);padding:var(--sp-5) var(--gut) var(--sp-6)}
.sn__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.sn__eyebrow{grid-column:1 / span 6;color:var(--graphite)}

.sn__a{display:block;margin-top:var(--sp-6);color:inherit}
.sn__a:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.sn__name{
  display:block;font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;text-wrap:balance;
  font-size:clamp(56px,8.4vw,136px);line-height:.92;letter-spacing:-.045em;transition:opacity .5s var(--ease);
}
.sn__a:hover .sn__name,.sn__a:focus-visible .sn__name{opacity:.55}
.sn__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sn-gap);margin-top:var(--sp-6)}
.sn .m-ph{width:100%;aspect-ratio:1 / 1;max-height:62svh}
.sn__f--a img{object-position:50% 56%}
.sn__f--b img{scale:1.8;transform-origin:82% 88%}   /* en attendant une vraie deuxième photo du projet : un détail de la première */

.sn__bot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-5);margin-top:var(--sp-4)}

.sn__all{color:var(--graphite)}
.sn__all:hover,.sn__all:focus-visible{color:var(--ink)}

/* ---------- Repère « provisoire » d'une phrase (les étiquettes .tmp sont dans accueil.css) ---------- */
.v-tmp{grid-column:1 / -1}

/* ---------- Appel à l'action ---------- */
.pj-cta{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-5);
  padding:var(--sp-9) var(--gut);background:var(--ink);color:var(--paper);
}
.pj-cta__q{
  max-width:14em;text-wrap:balance;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(34px,5vw,84px);line-height:1.05;letter-spacing:-.02em;
}
.pj-cta__b{
  display:inline-flex;align-items:center;gap:14px;height:72px;padding:0 36px;
  background-color:var(--red);color:var(--paper-hi);--bc:var(--paper);--bh:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:15px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  /* projet suivant : les deux photos restent côte à côte */
  .sn__eyebrow{grid-column:1 / span 7}

  .sn__name{font-size:clamp(56px,17vw,120px)}
  .sn .m-ph{aspect-ratio:3 / 4;max-height:none}
  .pj-cta__b{height:64px;padding:0 28px}
}
@media (prefers-reduced-motion:reduce){
  .js .m-f.fx .m-ph{clip-path:none}
  .js .p-lit .w{opacity:1}
}

.pj{--navh:64px}
.pj main{overflow-x:clip}

/* ---------- Ouverture : un cadre en bas à droite qui s'agrandit jusqu'au plein écran ---------- */
.hx{position:relative;height:260vh;height:260svh}
.hx__pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden;contain:layout paint}
.hx__top{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:var(--sp-4);
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-5);
  opacity:calc(1 - var(--e,0) * 2.2);
}

.hx__title{
  position:absolute;z-index:1;left:var(--gut);top:calc(var(--sp-9) + 2vh);max-width:62vw;margin:0;
  text-transform:none;text-wrap:balance;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(64px,12.5vw,230px);line-height:.88;letter-spacing:-.05em;
  transform:translate3d(0,calc(var(--e,0) * -78vh),0);opacity:calc(1 - var(--e,0) * 1.5);will-change:transform;
}
.hx__img{
  --i:calc(1 - var(--e,0));
  position:absolute;margin:0;overflow:hidden;background:var(--paper-hi);
  top:calc(var(--i) * 40vh);right:calc(var(--i) * 6vw);bottom:calc(var(--i) * 10vh);left:calc(var(--i) * 62vw);
}
.hx__img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--i) * .08));scale:var(--z);transform-origin:var(--f);-webkit-user-drag:none}

/* ---------- La phrase ---------- */
.px{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:var(--sp-10) var(--gut)}
.px .v-punch{max-width:11em}
.v-tmp{margin-bottom:var(--sp-5)}

/* ---------- Un fil de photos, le texte reste en place ---------- */
.st{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding:var(--sp-10) var(--gut)}
.st__text{grid-column:1 / span 4;align-self:start;position:sticky;top:calc(var(--navh) + 12vh);top:calc(var(--navh) + 12svh)}
.st__col{grid-column:6 / -1;display:flex;flex-direction:column;gap:26vh;gap:26svh;padding-block:8vh;padding-block:8svh}
.st--solo .st__col{grid-column:3 / span 8}
.st__f{margin:0;width:min(100%,calc(78svh * var(--r)))}
.st__f:nth-child(even){margin-left:auto}
.st__f:nth-child(3n){margin-left:14%}
.st__f .m-ph img{scale:calc(1.1 * var(--z,1));transform-origin:var(--f);translate:0 var(--py,0px)}

.ch__t{
  margin-bottom:var(--sp-4);max-width:15em;text-wrap:balance;text-transform:none;
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:clamp(19px,1.55vw,23px);line-height:1.2;letter-spacing:-.015em;
}
.ch__p{max-width:30em;text-wrap:pretty;font-size:var(--fs-body);line-height:1.5}

/* ---------- Une galerie épinglée : le scroll vertical la fait défiler à l'horizontale ---------- */
.fm{position:relative;height:300vh;height:300svh;display:flex;align-items:flex-start}
.fm__text{
  flex:0 0 clamp(280px,28vw,420px);align-self:flex-start;position:sticky;top:var(--navh);
  height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
}
.fm__pin{flex:1 1 auto;min-width:0;position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden}
.fm__view{height:100%;display:flex;align-items:center;overflow:hidden}
.fm__track{
  --fh:min(66vh,620px);--fh:min(66svh,620px);
  display:flex;align-items:flex-start;gap:var(--sp-6);padding:0 var(--gut) 0 58vw;   /* les images entrent par la droite */
  will-change:transform;transform:translate3d(var(--tx,0px),0,0);
}
.fm__f{flex:none;margin:0;width:calc(var(--fh) * var(--r))}
.fm__f .m-ph{width:100%;height:var(--fh);aspect-ratio:auto}
.fm__f .m-ph img{scale:var(--z);transform-origin:var(--f)}

/* ---------- Une photo qui passe en plein écran ---------- */
.gs{position:relative;height:220vh;height:220svh}
.gs__pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden;contain:layout paint}
.gs__img{
  --i:calc(1 - var(--e,0));
  position:absolute;margin:0;overflow:hidden;background:var(--paper-hi);
  top:calc(var(--i) * 16vh);bottom:calc(var(--i) * 16vh);left:calc(var(--i) * 24vw);right:calc(var(--i) * 24vw);
}
.gs__img img{width:100%;height:100%;object-fit:cover;object-position:var(--f,50% 50%);transform-origin:var(--f,50% 50%);transform:scale(calc(var(--z,1) + var(--i) * .08));-webkit-user-drag:none}

/* ---------- Une bande paysage, posée dans la page, avec de l'air autour (même photo qu'ailleurs, recadrée si besoin) ---------- */
.bn{padding:var(--sp-10) var(--gut)}
.bn__f{margin:0 auto;width:min(100%,calc(76vh * var(--r,1.78)));width:min(100%,calc(76svh * var(--r,1.78)))}   /* la photo entière, à ses proportions, centrée */
.bn__ph{aspect-ratio:var(--ar,16 / 9)}
.bn__ph img{scale:var(--z,1);transform-origin:var(--f);translate:none}
.bn--crop .bn__f{width:100%}                                  /* un cadrage est donné : bande large, photo rognée */
.bn--crop .bn__ph{aspect-ratio:auto;height:min(76vh,56vw);height:min(76svh,56vw)}
.bn--crop .bn__ph img{object-position:var(--f,50% 50%);transform-origin:var(--f,50% 50%);scale:calc(1.12 * var(--z,1));translate:0 var(--py,0px)}

/* ---------- Crédits : une ligne de petites fiches ---------- */
.cr{padding:var(--sp-9) var(--gut) var(--sp-8)}
.cr__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6) var(--gut)}
.cr__l > div:has(.tmp){grid-column:1 / -1}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .hx{height:230vh;height:230svh}
  .hx__title{max-width:92vw;font-size:clamp(56px,19vw,120px)}
  .hx__img{top:calc(var(--i) * 46vh);right:calc(var(--i) * 14vw);bottom:calc(var(--i) * 8vh);left:calc(var(--i) * 14vw)}

  .bn{padding-block:var(--sp-8)}
  .bn__f{width:100%}
  .bn--crop .bn__ph{height:min(48vh,92vw);height:min(48svh,92vw)}
  .gs{height:190vh;height:190svh}
  .gs__img{top:calc(var(--i) * 18vh);bottom:calc(var(--i) * 18vh);left:calc(var(--i) * 12vw);right:calc(var(--i) * 12vw)}
  .st{display:block;padding-block:var(--sp-8)}
  .st__text{position:static;margin-bottom:var(--sp-7)}
  .st__col,.st--solo .st__col{gap:12vh;gap:12svh;padding-block:0}
  .st__f,.st__f:nth-child(n){width:100%;margin-left:0}
  .fm{display:block}
  .fm__text{position:static;height:auto;display:block;padding:var(--sp-8) var(--gut) var(--sp-5)}
  .fm__pin{flex:none}
  .fm__track{--fh:min(58vh,480px);--fh:min(58svh,480px);padding-left:70vw}
  .cr__l{grid-template-columns:1fr 1fr}
}

/* ---------- Sans JavaScript ou mouvement réduit : tout est posé, rien ne bouge ---------- */
html:not(.js) [data-pin]{--e:1}
@media (prefers-reduced-motion:reduce){
  .hx,.gs,.fm{height:auto !important}
  .hx__pin,.gs__pin,.fm__pin,.fm__text{position:relative;top:0;height:auto;overflow:visible}
  .hx__top{position:static;opacity:1;padding:var(--sp-4) var(--gut) 0}
  .hx__title{position:static;transform:none;opacity:1;max-width:none;padding:var(--sp-7) var(--gut)}
  .hx__img,.gs__img{position:relative;inset:auto;aspect-ratio:16 / 9}
  .hx__img img,.gs__img img{transform:none}

  .gs{padding-bottom:var(--sp-8)}
  .fm{display:block}
  .fm__view{overflow-x:auto;height:auto}
  .fm__track{transform:none}
  .st__f .m-ph img,.bn--crop .bn__ph img{translate:none}
}
@media print{
  .hx,.gs,.fm{height:auto !important}
}