/* Cartes illustrées (lieux, missions…) : image 16/9, étiquette, titre, texte.
   Cartes de quartier (.quarters) : photo plus grande pouvant porter des pastilles, liste
   de noms (.who) et liseré de la couleur --page-accent ; .quarter--wide occupe la rangée. */

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.place { position: relative; background: var(--panel-solid); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.place:hover { border-color: rgba(255, 255, 255, .7); transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.place-img { aspect-ratio: 16 / 9; overflow: hidden; }
.place-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.6s ease; }
.place:hover .place-img img { transform: scale(1.06); }
.place-body { padding: 18px 20px 22px; }
.place-body h3 { margin: 6px 0 8px; font-size: 1.08rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pearl); }
.place-body p:last-child { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 1180px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .places { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cartes de quartier ---------- */
.quarters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.quarter { position: relative; display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--line); transition: border-color .3s; }
.quarter:hover { border-color: rgba(255, 255, 255, .5); }
.quarter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: linear-gradient(90deg, var(--page-accent, var(--gold)), transparent 70%); }
.quarter-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.quarter-photo > img { width: 100%; height: 100%; object-fit: cover; }
.quarter-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(12, 19, 40, .85), rgba(12, 19, 40, 0) 38%); }
.quarter-body { padding: 20px 24px 24px; }
.quarter-body h3 { margin: 6px 0 10px; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.quarter-body > p:not(.tag) { margin: 0 0 16px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.quarter-body em { font-style: normal; color: var(--ink); }
.who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.who li { padding: 3px 9px; border: 1px solid var(--line-strong); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

.quarter--wide { grid-column: 1 / -1; flex-direction: row; }
.quarter--wide .quarter-photo { flex: 1.55 1 0; aspect-ratio: auto; min-height: 340px; }
.quarter--wide .quarter-photo::after { background: linear-gradient(270deg, rgba(12, 19, 40, .9), rgba(12, 19, 40, 0) 30%); }
.quarter--wide .quarter-body { flex: 1 1 0; align-self: center; padding: 28px 30px; }

@media (max-width: 1020px) {
  .quarters { grid-template-columns: minmax(0, 1fr); }
  .quarter--wide { flex-direction: column; }
  .quarter--wide .quarter-photo { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .quarter--wide .quarter-photo::after { background: linear-gradient(0deg, rgba(12, 19, 40, .85), rgba(12, 19, 40, 0) 38%); }
  .quarter--wide .quarter-body { align-self: stretch; padding: 20px 24px 24px; }
}