/* ==========================================================================
   Pages « projet » (réalisations détaillées). Première : /projet-fidwins (31/10/2026).
   Construction reprise de clickway.fr/projets/app-turnly : écran du produit en 3D,
   fiche projet collante, chapitres « le constat / notre choix », technique, appel final.
   L'écran incliné est un portage sans React de « Container Scroll Animation »
   (Aceternity, licence MIT, trouvé sur 21st.dev) : voir projet.js.
   ========================================================================== */

.pj{ --pj-muted:#a1a1a1; --pj-line:rgba(255,255,255,.09); --pj-line-2:rgba(255,255,255,.16);
  --pj-card:rgba(14,14,16,.72); --pj-ease:cubic-bezier(.16,1,.3,1); }

/* ---------- Haut de page ---------- */
.pj-hero{ position:relative; padding:136px 0 0; }
.pj-hero .titre-page{ margin:0 0 22px; max-width:15ch; }
.pj-lead{ font-size:18px; line-height:1.6; color:var(--pj-muted); max-width:34rem; margin:0; text-wrap:pretty; }
.pj-actions{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.pj-actions .glass-btn{ gap:10px; white-space:nowrap; }
.pj-link{ display:inline-flex; align-items:center; gap:8px; color:var(--pj-muted); text-decoration:none;
  font-family:'JetBrains Mono',monospace; font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .2s ease; }
.pj-link span{ transition:transform .3s var(--pj-ease); }
.pj-link:hover{ color:#fff; }
.pj-link:hover span{ transform:translateX(4px); }
@media (min-width:768px){ .pj-hero{ padding-top:168px; } .pj-lead{ font-size:19px; } }

/* ---------- Écran du produit en 3D (Container Scroll) ---------- */
.pj-scroll{ position:relative; padding:56px 0 24px; }
.pj-stage{ perspective:1000px; }
.pj-device{ position:relative; margin:0 auto; width:min(1100px,100%);
  padding:10px; border-radius:30px; border:1px solid var(--pj-line-2);
  background:linear-gradient(180deg,#1d1d20 0%,#0c0c0e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
    0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
  transform-origin:50% 0; transform:rotateX(14deg) scale(1.03); will-change:transform; }
.pj-device-in{ position:relative; overflow:hidden; border-radius:20px; background:#010b40; aspect-ratio:16/10; }
.pj-device-in img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
/* (01/11/2026) Fidwins en vrai : la page fidwins.com/vitrine, dessinée à sa taille de conception
   (1440 × 900, ou 390 × 737 sur téléphone) puis réduite à la largeur de l'écran (--pj-k, projet.js).
   Elle apparaît en fondu une fois chargée, par-dessus son image d'attente (la même première scène). */
.pj-live{ position:absolute; top:0; left:0; width:1440px; height:900px; border:0; display:block;
  transform-origin:0 0; transform:scale(var(--pj-k,.76)); opacity:0; transition:opacity .6s var(--pj-ease);
  background:transparent; }
.pj-live.is-ready{ opacity:1; }
/* halo très doux sous l'écran : rappelle le bleu de Fidwins sans colorer le site */
.pj-scroll::before{ content:""; position:absolute; left:50%; top:30%; width:min(900px,90%); height:46%;
  transform:translateX(-50%); background:radial-gradient(closest-side,rgba(40,80,220,.22),transparent);
  filter:blur(40px); pointer-events:none; }
@media (min-width:768px){ .pj-scroll{ padding:72px 0 40px; } .pj-device{ padding:14px; } }
@media (max-width:767px){
  .pj-device{ width:min(340px,82vw); border-radius:38px; padding:9px; }
  .pj-device-in{ aspect-ratio:9/17; border-radius:30px; }
  .pj-live{ width:390px; height:737px; }
}
@media (prefers-reduced-motion:reduce){ .pj-device{ transform:none !important; will-change:auto; } }

/* ---------- Corps : texte + fiche collante ---------- */
.pj-body{ padding:72px 0 40px; }
.pj-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:56px; }
.pj-intro p{ margin:0; }
.pj-intro-big{ font-size:20px; line-height:1.5; color:#ececec; letter-spacing:-.01em; text-wrap:pretty; }
.pj-intro-big + p{ margin-top:22px !important; font-size:17px; line-height:1.7; color:var(--pj-muted); text-wrap:pretty; }
.pj-intro strong, .pj-chap strong{ color:#fff; font-weight:600; }
@media (min-width:1024px){
  .pj-grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:clamp(48px,6vw,96px); row-gap:0; }
  .pj-intro, .pj-chaps{ grid-column:1; }
  .pj-aside{ grid-column:2; grid-row:1 / span 2; }
  .pj-intro-big{ font-size:26px; }
}
@media (min-width:768px) and (max-width:1023px){ .pj-intro-big{ font-size:23px; }
}

.pj-aside-in{ position:sticky; top:112px; }
.pj-fiche{ margin:0; padding:26px 26px; border-radius:24px; border:1px solid var(--pj-line);
  background:var(--pj-card); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); display:grid; gap:17px; }
.pj-fiche div{ display:grid; gap:5px; }
.pj-fiche dt{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#8a8a8a; }
.pj-fiche dd{ margin:0; font-size:16px; line-height:1.45; color:#f2f2f2; font-weight:500; text-wrap:pretty; }
.pj-fiche dd a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:4px; }
.pj-fiche dd a:hover{ text-decoration-color:#fff; }
@media (max-width:1023px){ .pj-aside-in{ position:static; } }

/* ---------- Chapitres ---------- */
.pj-chaps{ display:grid; gap:88px; margin-top:88px; }
.pj-chap > p{ margin:0; font-size:17px; line-height:1.7; color:var(--pj-muted); max-width:62ch; text-wrap:pretty; }
.pj-chap > p + p{ margin-top:16px; }
.pj-h2{ margin:0 0 22px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:600;
  font-size:30px; line-height:1.12; letter-spacing:-.025em; color:#fff; text-wrap:balance; }
@media (min-width:768px){ .pj-h2{ font-size:38px; } .pj-chaps{ gap:112px; } }

.pj-shot{ margin:36px 0 0; }
.pj-shot img{ display:block; width:100%; height:auto; border-radius:22px; border:1px solid var(--pj-line); }
.pj-note{ margin-top:14px !important; font-size:13px !important; line-height:1.5 !important; color:#7d7d7d !important; }

/* trois écrans de téléphone côte à côte */
.pj-phones{ margin:54px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,2vw,22px); }
.pj-phones li{ margin:0; }
.pj-phones img{ display:block; width:100%; height:auto; aspect-ratio:600/1298; object-fit:cover;
  border-radius:clamp(16px,2.6vw,30px); border:1px solid var(--pj-line-2); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.pj-phones span{ display:block; margin-top:12px; font-size:13px; line-height:1.4; color:#bdbdbd; text-align:center; }
@media (max-width:480px){ .pj-phones span{ font-size:12px; } }

/* ---------- Galerie : 3 vues, cellule de gauche sur 2 rangées ---------- */
.pj-gallery{ padding:72px 0 24px; }
.pj-bento{ margin-top:8px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
.pj-bento figure{ margin:0; display:flex; flex-direction:column; }
.pj-bento .pj-frame{ position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--pj-line); background:#05081a; }
.pj-bento img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.pj-bento figcaption{ margin-top:12px; font-size:14px; line-height:1.45; color:#bdbdbd; }
@media (min-width:900px){
  .pj-bento{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); grid-template-rows:auto auto; gap:20px; }
  .pj-bento .pj-big{ grid-row:1 / span 2; }
  .pj-bento .pj-big .pj-frame{ flex:1; min-height:0; }
  .pj-bento .pj-small .pj-frame{ aspect-ratio:16/10.4; }
}

/* ---------- Technique : 5 tuiles (3 + 2) ---------- */
.pj-tech{ padding:88px 0 24px; }
.pj-tiles{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
.pj-tiles li{ padding:24px 24px 22px; border-radius:22px; border:1px solid var(--pj-line); background:var(--pj-card); }
.pj-tiles b{ display:block; font-size:19px; font-weight:600; letter-spacing:-.01em; color:#fff; }
.pj-tiles span{ display:block; margin-top:8px; font-size:15px; line-height:1.5; color:var(--pj-muted); }
@media (min-width:640px){ .pj-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){
  .pj-tiles{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
  .pj-tiles li{ grid-column:span 2; }
  .pj-tiles li:nth-child(4), .pj-tiles li:nth-child(5){ grid-column:span 3; }
}

/* ---------- Appel final ---------- */
.pj-end{ padding:128px 0 136px; text-align:center; }
.pj-end .pj-h2{ font-size:clamp(34px,5.4vw,60px); max-width:16ch; margin:0 auto 20px; }
.pj-end p{ margin:0 auto; max-width:34rem; font-size:18px; line-height:1.6; color:var(--pj-muted); text-wrap:pretty; }
.pj-end .pj-actions{ justify-content:center; }

/* apparitions : seulement si le visiteur accepte le mouvement */
@media (prefers-reduced-motion:no-preference){
  .pj-rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--pj-ease), transform .8s var(--pj-ease); }
  .pj-rv.is-in{ opacity:1; transform:none; }
  .pj-phones .pj-rv:nth-child(2){ transition-delay:.08s; }
  .pj-phones .pj-rv:nth-child(3){ transition-delay:.16s; }
}