/* Fiche projet — styles partagés (utilisés par les 6 pages /projets/[id]/) */

.pj-hero{ padding:120px 0 0; }
.pj-crumb{ font-size:12px; color:var(--ink-soft); margin-bottom:22px; }
.pj-crumb a{ color:var(--ink-soft); }
.pj-crumb a:hover{ color:var(--accent); }
.pj-title{ font-size:clamp(38px,7vw,84px); line-height:.98; max-width:900px; }
.pj-lead{ font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:620px; margin-top:22px; }
.pj-meta{ display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:46px; flex-wrap:wrap; }
.pj-meta-col{ flex:1 1 25%; min-width:150px; padding:20px 0; border-right:1px solid var(--line); }
.pj-meta-col:last-child{ border-right:none; }
.pj-meta-col .k{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:7px; }
.pj-meta-col .v{ font-size:14px; font-weight:600; }

.pj-heroimg-wrap{ margin-top:56px; text-align:center; line-height:0; }
.pj-heroimg{ display:inline-block; max-width:100%; max-height:74vh; width:auto; height:auto;
  border-radius:2px; border:1px solid var(--line); }
.pj-herovideo{ width:100%; display:block; background:#000; }

.pj-sec{ padding:78px 0; border-top:1px solid var(--line); }
.pj-sec-grid{ display:grid; grid-template-columns:1fr 2fr; gap:56px; }
.pj-sec h3{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600; }
.pj-sec .body{ font-size:16px; line-height:1.75; color:var(--ink); max-width:640px; }
.pj-sec .body p + p{ margin-top:16px; }
.pj-sec .body ul{ margin:14px 0 0; padding-left:20px; }
.pj-sec .body li{ margin-bottom:8px; line-height:1.6; }

.pj-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:end; }
.pj-gtile{ cursor:zoom-in; }
.pj-gtile .ph{ line-height:0; display:flex; align-items:flex-end; }
.pj-gtile .ph img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:2px; transition:border-color .2s; }
.pj-gtile:hover .ph img{ border-color:var(--accent); }
.pj-gtile figcaption{ margin-top:10px; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:860px){ .pj-gallery{ grid-template-columns:repeat(2,1fr); } .pj-sec-grid{ grid-template-columns:1fr; gap:20px; } }
@media (max-width:520px){ .pj-gallery{ grid-template-columns:1fr; } }

.pj-subsection{ margin-top:56px; padding-top:40px; border-top:1px dashed var(--line); }
.pj-subsection .subtag{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:600; margin-bottom:10px; }
.pj-subsection h4{ font-size:clamp(22px,3vw,32px); margin-bottom:14px; }
.pj-subsection .subtext{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:640px; margin-bottom:26px; }

.pj-cta-band{ padding:90px 0; border-top:1px solid var(--line); text-align:center; }
.pj-cta-band h2{ font-size:clamp(26px,4vw,40px); max-width:640px; margin:0 auto; }
.pj-cta-band p{ color:var(--ink-soft); margin-top:14px; font-size:15px; }
.pj-cta-band .cta{ margin-top:26px; }

.pj-nav{ border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }
.pj-nav a{ padding:34px 32px; display:flex; flex-direction:column; gap:8px; transition:background .2s; }
.pj-nav a:hover{ background:var(--panel); }
.pj-nav a.next{ text-align:right; align-items:flex-end; border-left:1px solid var(--line); }
.pj-nav .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.pj-nav .ttl{ font-size:20px; font-weight:700; }
@media (max-width:640px){ .pj-nav{ grid-template-columns:1fr; } .pj-nav a.next{ border-left:none; border-top:1px solid var(--line); } }

.pj-video-native{ width:100%; border-radius:2px; overflow:hidden; background:#000; line-height:0; }
.pj-video-native video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }

.pj-tech{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; max-width:640px; }
.pj-tech-row{ display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:12px 0; }
.pj-tech-row .k{ font-size:13.5px; color:var(--ink-soft); }
.pj-tech-row .v{ font-size:13.5px; font-weight:600; text-align:right; }
.pj-tech-note{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin-top:22px; max-width:640px; }
@media (max-width:640px){ .pj-tech{ grid-template-columns:1fr; } }

.pj-role-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--accent); border:1px solid var(--accent); padding:8px 16px; border-radius:2px; margin-top:18px;
}
.pj-role-badge::before{ content:"●"; font-size:8px; }

/* ---------- Retour à l'ensemble des projets (fixe, en haut à gauche du contenu) ---------- */
.pj-back{
  position:fixed; top:24px; left:calc(var(--side) + 28px); z-index:85;
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s, color .2s, transform .25s var(--ease);
}
.pj-back:hover{ border-color:var(--olive); color:var(--olive); }
.pj-back-arrow{ transition:transform .2s; }
.pj-back:hover .pj-back-arrow{ transform:translateX(-3px); }
@media (max-width:820px){
  .pj-back{ top:80px; left:16px; padding:8px 13px; font-size:10.5px; }
}

/* Sections titrées en pleine largeur (page Jeunesse) */
.pj-sec-title{ font-size:clamp(28px,4vw,44px); margin-bottom:16px; }
.pj-sec-lead{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); max-width:720px; margin-bottom:36px; }
.pj-herocap{ margin-top:14px; font-size:13px; color:var(--ink-soft); line-height:1.4; }
figure.pj-heroimg-wrap{ margin-left:0; margin-right:0; margin-bottom:0; cursor:zoom-in; }