/* ============================================================
   Copains·ines / sites ami·es — page dédiée. Scopé .copains.
   ============================================================ */
.copains { max-width: 1440px; margin: 0 auto; padding: var(--hero-top) var(--gutter) 5rem; }

/* HERO (aligné sur Portfolio/Collections/Articles) */
.copains-hero { padding: 0 0 2.5rem; border-bottom: 1px solid var(--ink); margin-bottom: 3rem; }
.copains-hero .marker { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.75rem; }
.copains-hero .marker .sep { margin: 0 0.65rem; color: var(--ink-4); }
.copains-title { font-family: var(--display); font-size: clamp(3rem, 10vw, 8rem); font-weight: 400; line-height: 0.85; letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); }
.copains-lede { font-family: var(--sans); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; margin-top: 1.4rem; }

/* GRILLE DES VIGNETTES (repris de contact.css) */
.copains .peers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.copains .peer { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: opacity 0.25s; }
.copains .peer:hover { opacity: 0.7; }
.copains .peer-img { aspect-ratio: 4/3; background: #2a2a2a; overflow: hidden; margin-bottom: 1rem; }
.copains .peer-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 0.5s var(--ease); }
.copains .peer:hover .peer-img img { transform: scale(1.03); }
.copains .peer-name { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.4rem; }
.copains .peer-role { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; }
.copains .peer-url { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.3rem; }
.copains .peer-url::after { content: "↗"; opacity: 0.5; }

@media (max-width: 1280px) { .copains .peers { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1040px) { .copains .peers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .copains .peers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .copains .peers { grid-template-columns: 1fr; } }