/* ==========================================================================
   projets.css — Pages de carnet éparpillées
   ========================================================================== */
.page-head { position: relative; padding-block: clamp(44px, 7vw, 88px) clamp(28px, 5vw, 56px); }
.page-head .display { margin-bottom: 1rem; }
.page-head__note { top: 30px; left: min(46%, 430px); --rot: -6deg; }
.page-head__arrow { top: 60px; left: calc(min(46%, 430px) - 56px); width: 64px; --rot: -10deg; scale: -1 1; }

/* Deux colonnes décalées, comme des feuilles posées sans ordre */
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 80px) clamp(28px, 6vw, 90px);
  padding-block: 20px clamp(40px, 6vw, 80px);
}
.project-slot:nth-child(even) { margin-top: clamp(30px, 6vw, 80px); }
.project-slot:nth-child(4n+1) { --rot: -1.4deg; }
.project-slot:nth-child(4n+2) { --rot: 1.2deg; }
.project-slot:nth-child(4n+3) { --rot: 0.8deg; }
.project-slot:nth-child(4n+4) { --rot: -1deg; }

.project { display: flex; flex-direction: column; gap: 1rem; padding: clamp(26px, 3.4vw, 40px); }
.project__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.project__num { font-family: var(--font-hand); font-size: 1.9rem; line-height: 1; color: var(--accent-deep); }
.paper--dark .project__num { color: var(--accent); }
.project__cat { font-size: 0.9rem; color: var(--sheet-soft); border-bottom: 1.5px dotted currentColor; padding-bottom: 1px; }

.project__photo-wrap { position: relative; margin-block: 0.4rem 0.6rem; }
.project__photo-wrap .tape { top: -12px; left: -14px; margin-left: 0; --tape-rot: -30deg; width: 76px; }
.project__photo { box-shadow: 0 0 0 5px #ece8dd; }
.paper--dark .project__photo { box-shadow: 0 0 0 5px #d9d4c7; }

.project__name { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -0.015em; margin-top: 0.4rem; }
.project__desc { color: var(--sheet-soft); max-width: 44ch; }
.project__tech { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.project__tech li { font-size: 0.82rem; padding: 2px 9px; border: 1px solid currentColor; opacity: 0.8; }
.project__foot { margin-top: 0.6rem; }
.project .btn { border-color: currentColor; color: inherit; padding: 0.7rem 1.2rem; font-size: 0.95rem; }
.project .btn:hover { background: var(--sheet-ink); color: var(--sheet-bg); border-color: var(--sheet-ink); }
.project__soon { font-family: var(--font-hand); font-size: 1.4rem; color: var(--sheet-soft); }

.projects-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding-block: 20px 0; }
.projects-end__text { font-size: 2rem; color: var(--accent); rotate: -2deg; }

@media (max-width: 860px) {
  .project-list { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .project-slot:nth-child(even) { margin-top: 0; margin-left: clamp(0px, 6vw, 40px); }
  .project-slot:nth-child(odd) { margin-right: clamp(0px, 6vw, 40px); }
}