/* Le Studio : styles de la page « projets ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Page Projets (v4) : le hub des projets
================================================================== */

/* Hero : les types de projets, en liste informative */
.phero__foot{display:grid;gap:28px;align-items:end}
.phero .wordmark{font-size:clamp(4rem,31vw,26rem);line-height:.9;padding-block:0 .12em;margin-block-end:-.08em;padding-inline-end:.04em}
@media (min-width:1024px){
  .phero__foot{grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--gutter) * 2)}
  .phero .wordmark{font-size:clamp(4rem,min(23vw,38svh),30rem)}
  .kinds{justify-self:end;inline-size:min(100%,30rem);padding-block-end:clamp(28px,4.4vw,76px)}
}
.kinds li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:48px;padding-block:11px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.kinds__name{font-size:clamp(1.0625rem,1.45vw,1.4375rem);font-weight:450;letter-spacing:-.03em;transition:transform .5s var(--ease-out)}
.kinds .meta{color:var(--on-night-2)}
@media (hover:hover) and (pointer:fine){ .kinds li:hover .kinds__name{transform:translateX(8px)} }

/* Barre d'outils : les filtres. Sans JavaScript, la liste complète suffit */
.hub__bar{display:none}
.js .hub__bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-block-end:clamp(36px,4.6vw,72px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid rgb(13 13 13 / .28);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.chip sup{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;line-height:1;color:var(--ink-2);transition:color var(--d-1) ease}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] sup{color:var(--on-night-2)}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .chip:hover{border-color:var(--ink)} }
@media (prefers-reduced-motion: reduce){ .chip:active{transform:none} }

/* La liste : une ligne par projet. Sur petit écran, une vignette à gauche ; sur grand écran, un aperçu collant à droite */
.work[hidden]{display:none}
.work__link{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding-block:clamp(14px,1.6vw,22px);border-block-start:1px solid var(--line);transition:opacity var(--d-2) ease}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.work__media{flex:none;position:relative;inline-size:clamp(76px,22vw,112px);aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--grey)}
.work__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover}
.work__meta{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 14px}
.work__n,.work__type{color:var(--ink-2)}
.work__type{grid-column:2}
.work__name{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1.05;transition:transform var(--d-2) var(--ease-out)}
@media (min-width:700px){
  .work__meta{grid-template-columns:auto minmax(0,1fr) auto}
  .work__type{grid-column:3;text-align:end}
}
.preview{display:none}
@media (min-width:1024px){
  /* L'aperçu est rempli par le script : sans JavaScript, les vignettes restent en place */
  .js .hub{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);align-items:start}
  .js .work__media{display:none}
  .js .preview{display:grid;gap:14px;position:sticky;inset-block-start:clamp(96px,14vh,140px)}
  .preview__stage{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--grey)}
  .preview__stage img{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;visibility:hidden}
  .preview__stage img.is-on{visibility:visible}
  .preview__cap{color:var(--ink-2)}
}
@media (hover:hover) and (pointer:fine){
  .works:hover .work__link{opacity:.32}
  .works .work__link:hover,.works .work__link:focus-visible{opacity:1}
  .work__link:hover .work__name{transform:translateX(clamp(10px,1.4vw,24px))}
}
@media (prefers-reduced-motion: reduce){ .work__name{transition:none} }

/* Les autres projets livrés */
.also{display:grid;gap:clamp(20px,2.4vw,32px)}
.also__title{font-size:var(--fs-base);font-weight:400;letter-spacing:0;line-height:1.5}
.also__list{display:flex;flex-wrap:wrap;gap:.1em .7em;font-size:var(--fs-h2m);font-weight:450;letter-spacing:-.045em;line-height:1.12;max-inline-size:22em}
.also__list li:not(:last-child)::after{content:"/";margin-inline-start:.7em;color:var(--line);font-weight:300}

/* Un résultat mesuré */
.res{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(48px,6vw,96px)}
.res__head{display:grid;gap:24px;justify-items:start}
.res__head h2{max-inline-size:12em}
.res__grid{display:grid;gap:48px}
.res__fig{font-size:clamp(7rem,21vw,23rem);font-weight:450;letter-spacing:-.075em;line-height:.85;display:flex;align-items:flex-start}
.res__fig small{font-size:.36em;letter-spacing:-.04em;line-height:1;padding-block-start:.24em;margin-inline-end:.06em;color:var(--accent)}
.res__fig .odo{block-size:.85em}
.res__fig .odo__col span{block-size:.85em;line-height:.85}
.res__side{display:grid;gap:clamp(24px,2.8vw,40px);align-content:end}
.res__side .lead{max-inline-size:26em}
.res__bars{display:grid;gap:14px}
.res__bars p{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 4.5rem;align-items:center;gap:16px;min-height:44px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.res__bars .meta{color:var(--on-night-2)}
.res__bars .num{text-align:end;font-weight:450;letter-spacing:-.02em}
.res__bars i{display:block;block-size:10px;border-radius:var(--r-pill);background:var(--on-night-2);transform-origin:left center;transform:scaleX(var(--w))}
.res__bars i.is-accent{background:var(--accent)}
.anim .res__bars i{transform:scaleX(0)}
.res__unit{color:var(--on-night-2)}
@media (max-width:519.98px){ .res__bars p{grid-template-columns:minmax(0,1fr) auto;padding-block:10px} .res__bars i{grid-column:1 / -1;grid-row:2} }
@media (min-width:1024px){ .res__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:var(--gutter);align-items:end} }

/* Grand mot : déjà calé au bas du cadre par les réglages de cette page, il ne prend pas la descente commune de base.css (10 nov. 2026) */
.phero .wordmark{translate:none}