/* PAGE PROJET — gabarit commun aux 18 réalisations (24/10/2026). Chaque page prend la couleur de son projet (--projet) :
   le hero montre le premier écran du site, puis le site défile dans son écran au rythme de la page, le mobile à côté.
   Préfixe pj-. */
.pj{--pole:var(--projet)}
.pj-hero{position:relative;overflow:hidden;min-height:min(92vh,900px);display:flex;align-items:flex-end;padding:clamp(120px,14vh,180px) 0 clamp(56px,8vh,96px)}
.pj-hero__fond{position:absolute;inset:0;z-index:-1}
.pj-hero__fond img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.9) brightness(.42);transform:scale(1.06);animation:pj-approche 18s ease-out both}
.pj-hero__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.2),rgba(10,11,14,.55) 50%,#0A0B0E 96%),radial-gradient(60% 70% at 20% 90%,color-mix(in srgb,var(--projet) 35%,transparent),transparent 70%)}
@keyframes pj-approche{from{transform:scale(1.14)}}
.pj-hero__texte{position:relative}
.pj-retour{display:inline-flex;gap:8px;margin-bottom:28px;font-size:14px;font-weight:500;color:var(--w-gris);text-decoration:none}
.pj-retour:hover{color:var(--w-blanc)}
.pj-hero .pastille::before{background:var(--projet)}
.pj-hero__titre{margin:18px 0 22px;max-width:16ch;font-size:clamp(52px,7vw,124px);font-weight:700;letter-spacing:-.045em;line-height:.98;color:#F7FAFF}
.pj-livrables{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0}
.pj-livrables li{padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--projet) 60%,transparent);background:color-mix(in srgb,var(--projet) 14%,rgba(10,11,14,.6));font-size:13.5px;font-weight:500;color:#F7FAFF;backdrop-filter:blur(6px)}

.pj-defile{position:relative;height:260vh}
.pj-defile__scene{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(50% 60% at 60% 50%,color-mix(in srgb,var(--projet) 16%,transparent),transparent 70%)}
.pj-defile__grille{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,17vw,280px);gap:clamp(24px,3vw,56px);align-items:center}
.pj-ecran{border-radius:16px;overflow:hidden;border:1px solid var(--w-filet-fort);background:#0C0D11;box-shadow:0 60px 120px -50px rgba(0,0,0,.95)}
.pj-ecran__barre{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#15171D;border-bottom:1px solid var(--w-filet)}
.pj-ecran__barre span{width:10px;height:10px;border-radius:50%;background:#2A2E39}
.pj-ecran__barre p{margin:0 auto;padding:4px 14px;border-radius:999px;background:#0C0D11;font-size:12px;color:var(--w-gris)}
.pj-ecran__vue{height:min(70vh,640px);overflow:hidden}
.pj-ecran__vue img,.pj-mobile__vue img{width:100%;height:auto;will-change:transform}
.pj-mobile{padding:10px;border-radius:38px;background:linear-gradient(150deg,#3A3F4D,#14161C 40%,#2A2E39);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.9)}
.pj-mobile__vue{aspect-ratio:9/19;border-radius:30px;overflow:hidden;background:#0C0D11}
.pj-fiche__texte{margin:0 0 32px;font-size:clamp(19px,1.5vw,24px);line-height:1.55;color:#E7E9EE}
.pj-fiche__infos{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--w-filet)}
.pj-fiche__infos div{padding:18px 0;border-bottom:1px solid var(--w-filet)}
.pj-fiche__infos dt{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--projet)}
.pj-fiche__infos dd{margin:0;font-size:16px;color:var(--w-blanc);overflow-wrap:anywhere}

.pj-suivant{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--w-filet)}
.pj-suivant__lien{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;color:inherit;text-decoration:none}
.pj-suivant__titre{display:flex;flex-direction:column;gap:10px}
.pj-suivant__titre small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--suivant)}
.pj-suivant__titre strong{font-size:clamp(40px,4.6vw,80px);font-weight:600;letter-spacing:-.04em;line-height:1.02;transition:transform .6s var(--w-ease)}
.pj-suivant__titre span{font-size:16px;color:var(--w-gris)}
.pj-suivant__image{display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--w-filet)}
.pj-suivant__image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--w-ease)}
.pj-suivant__lien:hover .pj-suivant__titre strong{transform:translateX(12px)}
.pj-suivant__lien:hover .pj-suivant__image img{transform:scale(1.05)}
@media (max-width:1000px){
  .pj-defile{height:auto}.pj-defile__scene{position:relative;height:auto;padding:72px 0}
  .pj-defile__grille,.pj-suivant__lien{grid-template-columns:1fr}.pj-mobile{max-width:260px;justify-self:center}
  .pj-ecran__vue{height:auto;max-height:70vh}
}
@media (prefers-reduced-motion:reduce){.pj-hero__fond img{animation:none}}
/* Le fond du hero passe devant le fond de page (isolation), le lien retour a sa propre ligne */
.pj-hero{isolation:isolate}
.pj-retour{display:flex;width:fit-content}
/* Le site du client reste une ambiance derrière le titre : plus sombre, légèrement flou, et voilé à gauche où l'on lit */
.pj-hero__fond img{filter:saturate(.85) brightness(.34) blur(3px)}
.pj-hero__fond::after{background:linear-gradient(90deg,#0A0B0E 8%,rgba(10,11,14,.7) 45%,rgba(10,11,14,.25)),linear-gradient(180deg,transparent 50%,#0A0B0E 97%),radial-gradient(60% 70% at 20% 90%,color-mix(in srgb,var(--projet) 35%,transparent),transparent 70%)}
.pj-hero .pastille{border:0;background:none;padding:0;box-shadow:none}