/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — PROJET (maquette 18:10)
   Cover visuel sticky + sections texte/images + résultats + autres cases
   ═════════════════════════════════════════════════════════════ */

/* ── Cover : le visuel de la case ── */
.hero--projet {
  background-color: var(--night);
}

.pj-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pj-cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* Cover (maquette 97:3370) : titre CENTRÉ au milieu de l'écran,
   expertises en mono dessous. MÊME FONCTIONNEMENT que les bandes :
   le texte vit DANS LE FLUX (couche absolue posée sur l'écran du
   hero) → il scrolle avec la page pendant que le visuel reste
   épinglé et s'estompe (--hero-p). */
.pj-cover-content {
  position: absolute;
  top: -100vh;
  top: -100svh;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  color: var(--white);
  padding: 0 var(--pad-x);
  pointer-events: none;
}

.pj-hero-cats {
  letter-spacing: 0.14em;
  opacity: 0.92;
}

/* ── Corps ── */
.pj-body {
  position: relative; /* ancre la couche titre de cover (.pj-cover-content) */
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, var(--night) 16%);
  color: var(--white);
  /* pas de padding bas : la section contact (rouge, full-bleed) est le
     dernier bloc et doit toucher le footer — sinon bande noire */
}

/* ── RYTHME VERTICAL : un seul pas (--pj-gap) entre tous les blocs
   majeurs — intro→chapitre, chapitre→bande, bande→chapitre,
   chapitre→résultats. Une seule variable à régler. ── */
.pj-body {
  --pj-gap: calc(var(--section-gap) * 0.6);
}

/* ── Intro ── */
.pj-intro {
  padding: 34vh 0 var(--pj-gap);
}

.pj-intro-inner {
  width: min(var(--content-w), calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.pj-title {
  font-size: var(--display-size);
  line-height: var(--display-lh);
}

.pj-intro-title {
  font-size: var(--title-size);
  line-height: var(--title-lh);
}

/* Bouton site live : version GHOST — contour seul sur le fond sombre,
   se remplit au survol */
.pj-visit {
  margin-top: 12px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.pj-visit:hover,
.pj-visit:focus-visible {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.pj-excerpt {
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  max-width: 34ch;
}

.pj-credits {
  color: var(--grey-400);
  font-size: 14px;
  line-height: 20px;
}

/* ── Sections : compositions fidèles au Figma (frames 18:15 / 21:82) ──
   Grille 12 colonnes × rangées proportionnelles (216px sur 1728) :
   îlot de 3 images en quinconce + 2 blocs texte, miroir alterné.
   Les figures flottent au scroll via data-float (reveal.js). ── */
.pj-section {
  padding-block: 0; /* le rythme vient des marges des blocs (--pj-gap) */
}

.pj-comp {
  /* Figma : pitch vertical 216 = rangée 200 + gouttière 16 (sur 1728).
     Les images font 4 rangées + 3 gouttières = 848, et deux images
     adjacentes sont séparées par la gouttière — la MÊME sur les deux
     axes (--gutter, design system). */
  --ru: calc((100vw - 48px) * 0.1157);
  width: calc(100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(var(--ru), auto);
  gap: var(--gutter);
}

/* Layout A (18:15) : texte à gauche, grande image bord gauche */
.pj-comp--a .pjc-text1 { grid-area: 1 / 3 / 4 / 6; }
.pj-comp--a .pjc-img1  { grid-area: 2 / 7 / 6 / 11; }
.pj-comp--a .pjc-img2  { grid-area: 4 / 1 / 8 / 7; }
.pj-comp--a .pjc-img3  { grid-area: 6 / 7 / 10 / 12; }
.pj-comp--a .pjc-text2 { grid-area: 8 / 3 / 10 / 6; }

/* Layout B (21:82) : miroir — texte à droite, grande image bord droit */
.pj-comp--b .pjc-text1 { grid-area: 1 / 7 / 4 / 10; }
.pj-comp--b .pjc-img1  { grid-area: 3 / 3 / 7 / 7; }
.pj-comp--b .pjc-img2  { grid-area: 4 / 7 / 8 / 13; }
.pj-comp--b .pjc-img3  { grid-area: 7 / 2 / 11 / 7; }
.pj-comp--b .pjc-text2 { grid-area: 8 / 7 / 11 / 10; }

.pj-comp-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-block: 24px;
}

.pj-sec-label {
  color: var(--grey-400);
}

.pj-comp-title {
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1.25;
}

.pj-comp-lead {
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.pj-p {
  color: rgba(255, 255, 255, 0.82);
}

/* ── Figures (flottantes + cliquables → galerie) ──
   overflow hidden : l'animation d'apparition du bouton (translateY 48px)
   est clippée DANS le cadre de la figure — sans ça, l'image décalée
   mordait sur sa voisine (gouttière 13px) le temps du reveal. */
.pj-fig {
  position: relative; /* ancre le bouton play/pause des slots vidéo */
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-tile);
  isolation: isolate;
  will-change: transform;
}

.pj-fig-btn {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-tile);
  padding: 0;
  cursor: zoom-in;
}

/* Loop vidéo DANS le gabarit du slot : remplit la boîte, action centrée
   (object-fit cover), mêmes coins que les images ; clic → lightbox */

.pj-fig-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pj-fig-btn {
  /* force le clipping des coins malgré la parallaxe interne composited
     (bug Chrome radius + overflow + transform enfant) */
  transform: translateZ(0);
  isolation: isolate;
  /* une seule transition pour le reveal ET le hover : l'opacité doit
     TOUJOURS transitionner (sinon l'image apparaît d'un coup) */
  transition: opacity 1.1s ease, transform 1.15s var(--ease-out);
}

/* Apparition : fondu + montée DANS le cadre. Le scale (1.12) dépasse
   l'offset vertical (6%) : le cadre reste plein pendant tout le
   mouvement — ni trou en haut, ni chevauchement des voisines. */
.pj-fig [data-reveal-img] {
  opacity: 0;
  transform: translateY(6%) scale(1.12) translateZ(0);
}

.pj-fig [data-reveal-img].is-inview {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* Affordance de clic : léger zoom, clippé dans le cadre de la figure */
.pj-fig .pj-fig-btn:hover,
.pj-fig .pj-fig-btn:focus-visible {
  transform: scale(1.04) translateZ(0);
}

/* Badge « agrandir » (chevrons 52:3996 + 52:4003), en bas à droite —
   TOUJOURS visible. Par défaut : verre dépoli SOMBRE + icône blanche
   (scrim : se fond sur les images sombres, reste lisible sur les images
   claires — ex. hero Hyperia blanc) ; au survol : blanc plein + chevrons
   qui s'écartent (règle dans base.css) */
/* Visuel : composant DS .q-glass (css/components.css) — ici seulement
   le POSITIONNEMENT dans la figure. Le badge est SIBLING du bouton
   (hors parallaxe/hover-scale) : il reste FIXE dans le cadre, comme
   le play/pause. Décoratif : les clics passent au bouton dessous. */
.pj-fig-zoom {
  position: absolute;
  right: clamp(16px, 1.85vw, 32px);
  bottom: clamp(16px, 1.85vw, 32px);
  z-index: 2;
  pointer-events: none;
}

.pj-fig-btn:hover ~ .pj-fig-zoom,
.pj-fig-btn:focus-visible ~ .pj-fig-zoom {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* Bouton play/pause des slots VIDÉO : composant DS .q-glass/.q-toggle
   (css/components.css), EN HAUT À DROITE du slot (l'expand reste en
   bas à droite). Sibling du bouton lightbox → il pilote le loop sans
   l'ouvrir. Ici seulement le positionnement. */
.pj-fig-play {
  position: absolute;
  top: clamp(16px, 1.85vw, 32px);
  right: clamp(16px, 1.85vw, 32px);
  z-index: 2;
}

.pj-video {
  width: min(var(--wide-w), calc(100% - 2 * var(--pad-x)));
  margin: clamp(24px, 3.2vw, 56px) auto 0;
}

.pj-video video {
  width: 100%;
  border-radius: var(--radius-tile);
}

/* ── Cover de chapitre (maquette 21:96) : image contribuée pleine
   hauteur, épinglée au scroll puis fondue vers le noir pour laisser
   place au contenu (réf. rockstar only-in-leonida). Le wrap fait
   2 écrans : le 2e écran de scroll pilote --pin-p (reveal.js). ── */
.pj-band {
  position: relative; /* ancre la couche texte absolue (.pj-band-content) */
  /* 1 écran épinglé + ½ écran de fondu : la course entre le fondu et
     le contenu suivant est divisée par 2 (retour Jordan 21/07) */
  height: 150vh;
  height: 150svh;
  margin-block: var(--pj-gap);
}

.pj-band-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  /* le contenu vit EN BAS : le visuel respire, le texte s'assoit
     dans la zone assombrie par l'overlay (maquette 21:96) */
  align-items: flex-end;
  background-color: var(--night);
}

.pj-band-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: calc(1 - var(--pin-p, 0));
}

/* cover vidéo (loops produit / captures) : plein cadre, comme l'image */
.pj-band-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay bas → noir du site (maquette : Overlay 400/1117),
   assez dense pour garantir la lecture sur les visuels clairs */
.pj-band-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 45%, rgba(26, 26, 26, 0.55) 74%, var(--night) 100%);
}

/* Le texte du chapitre vit dans le FLUX (pas dans le pin) : couche
   absolue posée sur le premier écran de la bande → il scrolle
   naturellement avec la page pendant que le média reste épinglé. */
.pj-band-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  pointer-events: none; /* rien de cliquable : le scroll passe */
}

.pj-band-inner {
  position: relative;
  width: min(var(--content-w), calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
  padding-bottom: clamp(40px, 10vh, 128px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
}

/* VERBATIM (maquette 97:3396) : citation seule sur le média épinglé */
.pj-verbatim {
  max-width: 46ch;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.45;
  color: var(--white);
  text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

.pj-band-inner > * {
  max-width: 38ch;
}

.pj-band-title {
  font-size: var(--title-size);
  line-height: var(--title-lh);
  color: var(--white);
}

.pj-band-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.5;
}

/* ── Résultats (masqués si vides côté build) ── */
.pj-results {
  position: relative;
  overflow: hidden;
  padding: calc(var(--section-gap) * 1.2) 0;
  margin-block: var(--pj-gap) 0; /* le bas est donné par le padding des crédits */
  /* Pleine hauteur comme la maquette (cover 22:107) */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* le bloc titre + cartes vit sur la MOITIÉ BASSE de la section
     (maquette 97:3415) */
  align-items: flex-end;
}

.pj-results-bg {
  position: absolute;
  inset: 0;
}

.pj-results-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.pj-results-inner {
  position: relative;
  z-index: 2;
  width: min(var(--wide-w), calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
}

.pj-results-title {
  font-size: var(--title-size);
  line-height: var(--title-lh);
}

.pj-out-carousel {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  /* jamais de scroll vertical dans le carrousel */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
  /* FULL-BLEED (maquette 97:3415) : le scroller s'étend jusqu'aux
     bords de l'ÉCRAN — les cartes « sortent » du viewport et s'y
     coupent. --bleed = marge entre la grille (--wide-w centré, mini
     --pad-x) et le bord de l'écran ; le padding ramène la première
     carte sur la grille au repos, le scroll-padding cale le snap. */
  --bleed: max(var(--pad-x), calc((100vw - var(--wide-w)) / 2));
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}

.pj-out-carousel::-webkit-scrollbar {
  display: none;
}

/* Cartes conformes à la maquette (card / outcome, 400px, padding 24) */
.pj-out-card {
  flex: 0 0 clamp(300px, 27vw, 400px);
  scroll-snap-align: start;
  background-color: var(--white);
  color: var(--black);
  border-radius: var(--radius-tile);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(48px, 5.5vw, 96px);
  min-height: clamp(280px, 22vw, 330px);
}

.pj-out-stat {
  font-family: var(--font-sans);
  font-size: clamp(44px, 3.7vw, 64px);
  line-height: 1;
  font-weight: 400;
}

.pj-out-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pj-out-label {
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
}

.pj-out-desc {
  font-size: 16px;
  line-height: 24px;
  color: #595959;
}

/* Carte « prix » (maquette 97:3415) : le chiffre dans le LAURIER,
   label dessous — toujours la PREMIÈRE carte du carrousel */
.pj-out-card--prize {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pj-out-prize {
  position: relative;
  width: min(68%, 222px);
}

.pj-out-laurel {
  display: block;
  width: 100%;
  height: auto;
}

.pj-out-prize-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pj-out-card--prize .pj-out-label {
  font-size: 14px;
  line-height: 20px;
}

/* ── Nav du carrousel (maquette : flèche dans un rond noir, centrée
   sur la hauteur des cartes) : overlay sur le wrap du carrousel ── */
.pj-out-wrap {
  position: relative;
}

.pj-out-nav.is-hidden {
  display: none;
}

.pj-out-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(48px, 3.6vw, 60px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}

.pj-out-arrow--prev {
  left: 14px;
}

.pj-out-arrow--next {
  right: 14px;
}

.pj-out-arrow:hover,
.pj-out-arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
}

/* Aux extrémités, la flèche inutile s'efface (projet.js) */
.pj-out-arrow.is-off {
  opacity: 0;
  pointer-events: none;
}

/* ── Crédits du projet : table éditoriale sobre (sous les résultats) ── */
.pj-credits-sec {
  width: min(720px, calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
  padding-block: calc(var(--section-gap) * 0.55);
}

.pj-credits-inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* maquette 100:8609 : tout est centré */
  gap: clamp(28px, 3.2vw, 44px);
}

.pj-credits-title {
  font-size: var(--title-size);
  line-height: var(--title-lh);
}

.pj-credits-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: min(680px, 100%);
}

.pj-credit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: baseline;
  padding: 7px 0;
}

.pj-credit-row dt {
  color: var(--grey-400);
  text-align: right; /* labels alignés à droite vers l'axe central */
}

.pj-credit-row dd {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--white);
}

/* Un nom complet (prénom + nom) ne se coupe JAMAIS sur deux lignes :
   la ligne ne peut casser qu'ENTRE deux personnes (après la virgule) */
.pj-credit-name {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pj-credit-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── Autres case studies ── */
.pj-others {
  width: min(var(--wide-w), calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
  padding-block: calc(var(--section-gap) * 0.7);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8vw, 40px);
}

.pj-others-title {
  font-size: var(--title-size);
  line-height: var(--title-lh);
}

.pj-others-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.pj-other {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-tile);
  overflow: hidden;
  /* coins arrondis garantis malgré le scale composited du media
     (bug Chrome radius + overflow + transform enfant) */
  transform: translateZ(0);
  isolation: isolate;
}

.pj-other-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease-out);
}

.pj-other:hover .pj-other-media {
  transform: scale(1.05);
}

.pj-other-info {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pj-other:hover .pj-other-info,
.pj-other:focus-visible .pj-other-info {
  opacity: 1;
}

.pj-other .tile-title {
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.3;
}

.pj-other .pill-btn {
  pointer-events: none;
  padding: 10px 18px;
  font-size: 14px;
}

/* ── Lightbox galerie (maquette 35:13785) ──
   Image pleine hauteur avec marges latérales, pastilles blanches,
   pagination en bas. body.lb-open réduit le header au bouton Retour. */
.pj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 26, 26, 0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.pj-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* L'interface (pastilles, pagination) apparaît après le morph */
.pj-lb-btn,
.pj-lb-count {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pj-lightbox.is-ui .pj-lb-btn,
.pj-lightbox.is-ui .pj-lb-count {
  opacity: 1;
}

.pj-lb-stage {
  position: absolute;
  inset: 0 clamp(72px, 6.95vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pj-lb-stage img,
.pj-lb-stage video {
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  border-radius: 0;
  transition: opacity 0.35s ease;
}

/* Changement d'image : fondu (piloté par projet.js) */
.pj-lb-stage img.is-swapping {
  opacity: 0;
}

/* Pastilles 48px : par défaut fond translucide flouté (comme le bouton
   expand), blanc plein au survol */
.pj-lb-btn {
  position: fixed;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, background-color 0.4s ease, color 0.4s ease;
}

.pj-lightbox.is-ui .pj-lb-btn:hover {
  background-color: var(--white);
  color: var(--black);
}

.pj-lb-arrow--prev {
  left: 32px;
  top: 50%;
  margin-top: -24px;
}

.pj-lb-arrow--next {
  right: 32px;
  top: 50%;
  margin-top: -24px;
}

/* Pagination (maquette : « 1 / 99 » bas centre) */
.pj-lb-count {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  letter-spacing: 0.08em;
}

/* Header en mode galerie : seul Retour subsiste, ET le header passe
   AU-DESSUS de l'overlay (sinon le Retour est masqué dessous) */
body.lb-open .nav {
  z-index: 340;
}

body.lb-open .nav-logo,
body.lb-open .nav-right,
body.lb-open .menu-toggle {
  display: none;
}

/* Retour = fermeture de la galerie : même traitement frosted que les
   pastilles (sinon le pill --night se fond dans l'overlay sombre) */
body.lb-open .nav-back {
  background-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
}

body.lb-open .nav-back:hover {
  background-color: var(--white);
  color: var(--black);
  transform: none;
}

/* L'image en vol (morph ouverture/fermeture, posée par projet.js) */
.pj-lb-fly {
  position: fixed;
  z-index: 320;
  object-fit: cover;
  border-radius: 16px;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  /* La composition en grille repasse en flux vertical simple */
  .pj-comp {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    width: calc(100% - 2 * var(--pad-x));
  }

  .pj-fig {
    height: auto;
    padding-block: 0;
  }

  .pj-fig-btn {
    aspect-ratio: 4 / 3;
  }

  .pj-comp-text {
    padding-block: 12px;
  }

  .pj-intro {
    padding-top: 30vh;
  }

  .pj-others-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pj-others-row::-webkit-scrollbar {
    display: none;
  }

  .pj-other {
    flex: 0 0 72vw;
    scroll-snap-align: start;
  }

  .pj-other-info {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55));
  }

  .pj-lb-arrow--prev { left: 12px; }
  .pj-lb-arrow--next { right: 12px; }
}


/* ── Contact (maquette 97:3479) : bloc rouge, logo 4, CTA drawer ── */
.pj-contact {
  background-color: var(--brand);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vh, 36px);
  padding: clamp(72px, 11vh, 128px) var(--pad-x);
  text-align: center;
}

.pj-contact-logo {
  width: clamp(64px, 6vw, 96px);
  height: auto;
}

.pj-contact-title {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
}

.pj-contact-btn {
  padding: 13px 28px;
  border-radius: 9999px;
  background-color: var(--black);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.35s var(--ease-out);
}

.pj-contact-btn:hover {
  transform: scale(1.05);
}