/* ── Pages projets — DA du site ──
   Les couleurs viennent de ../theme.css (chargé avant ce fichier) : un seul
   endroit définit les deux thèmes pour tout le site. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--ink); color: var(--cream);
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif; font-weight: 300; min-height: 100svh;
}
::selection { background: var(--amber); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(var(--fg-rgb), calc(.07 * var(--fg-k))) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--fg-rgb), calc(.07 * var(--fg-k))) 1px, transparent 1px);
  background-size: 46px 46px;
}
nav {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 28px);
  padding: 20px clamp(24px, 5vw, 72px);
  border-bottom: 1px solid rgba(var(--fg-rgb), calc(.06 * var(--fg-k)));
}
/* le logo absorbe l'espace libre : « retour » + contrôles restent à droite */
.logo { font-family: 'Sorren', Georgia, serif; font-size: 1rem; letter-spacing: .1em; margin-inline-end: auto; }
.back { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); transition: color .2s; }
.back:hover { color: var(--amber-hot); }
main { max-width: 940px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 72px) 140px; }
.draft {
  display: inline-block; margin-bottom: 26px;
  font-size: .52rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 100px; padding: 5px 13px;
}
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--amber); }
h1 { font-family: 'Sorren', Georgia, serif; font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .95; margin-bottom: 18px; }
.sub {
  font-size: .9rem; line-height: 2; color: var(--dim);
  margin-bottom: 40px;
  text-align: justify; hyphens: auto;
}
.banner {
  width: 100%; aspect-ratio: 16 / 7; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb), calc(.1 * var(--fg-k))); margin-bottom: 44px;
  background: rgba(var(--fg-rgb), calc(.02 * var(--fg-k)));
}
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px;
  border-block: 1px solid rgba(var(--fg-rgb), calc(.08 * var(--fg-k))); padding: 22px 0; margin-bottom: 56px;
}
.meta div { display: flex; flex-direction: column; gap: 7px; }
.meta dt { font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.meta dd { font-size: .82rem; color: var(--cream); }
.meta a { color: var(--amber); border-bottom: 1px solid rgba(var(--accent-rgb), .3); }
.meta a:hover { color: var(--amber-hot); }
h2 {
  font-family: 'Sorren', Georgia, serif; font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 54px 0 20px; color: var(--cream);
}
/* les textes occupent toute la colonne (comme la méta et les puces) et
   sont justifiés → bord droit net, plus de zone vide */
p.txt {
  font-size: .86rem; line-height: 2.05; color: var(--dim);
  text-align: justify; hyphens: auto;
}
ul.pts { list-style: none; display: flex; flex-direction: column; gap: 12px; }
ul.pts li {
  position: relative; padding-left: 22px;
  font-size: .84rem; line-height: 1.9; color: var(--dim);
  text-align: justify; hyphens: auto;
}
ul.pts li::before { content: '→'; position: absolute; left: 0; color: var(--amber); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.shot {
  aspect-ratio: 16 / 10; border-radius: 12px;
  border: 1px dashed rgba(var(--fg-rgb), calc(.18 * var(--fg-k)));
  display: grid; place-items: center;
  font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--fg-rgb), calc(.25 * var(--fg-k)));
}

/* Captures réelles : mise en forme des screenshots */
.shots:has(img) { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.shot:has(img) {
  aspect-ratio: auto; border: 1px solid rgba(var(--fg-rgb), calc(.12 * var(--fg-k)));
  border-radius: 14px; overflow: hidden;
  background: rgba(var(--fg-rgb), calc(.02 * var(--fg-k)));
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), calc(.35 * var(--shadow-k)));
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.shot:has(img):hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 26px 60px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))), 0 0 24px rgba(var(--accent-rgb), .08);
}
.shot img { width: 100%; height: auto; display: block; }
footer {
  padding: 40px clamp(24px, 5vw, 72px); border-top: 1px solid rgba(var(--fg-rgb), calc(.06 * var(--fg-k)));
  text-align: center; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), calc(.15 * var(--fg-k)));
}