/* ══════════════════════════════════════════════════════════════════════════
   QUI SOMMES-NOUS — ce qui est propre à la page

   Le reste vient de page.css. Ici : la ville reliée, la bande du socle, et
   les lignes rouges.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La ville reliée ──────────────────────────────────────────────────────
   Dix métiers, dix fils qui montent vers un seul point : la marque. C'est le
   produit résumé en une image — un numéro qui décroche pour tout le monde.
   Aplats pleins, aucun dégradé, et pas la moindre photographie. */
.qsn-ville { margin: 0; }

.qsn-ville svg {
  display: block; width: 100%; height: auto;
  border-radius: 26px;
  background: #EDF1F7;
  box-shadow: inset 3px 3px 8px rgba(120, 136, 160, .42), inset -3px -3px 8px rgba(255, 255, 255, .7);
}
.qsn-legende {
  margin: 16px auto 0; max-width: 56ch; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--pg-ink3);
}

/* ── La bande du socle ── */
.qsn-socle li { padding-left: 12px; }
.qsn-drapeau { width: 20px; height: 14px; border-radius: 3px; flex: 0 0 auto; }

/* ── Les lignes rouges ── */
.qsn-jamais { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; }
.qsn-nots { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.qsn-nots li {
  position: relative; padding: 16px 20px 16px 46px;
  background: var(--pg-carte); box-shadow: var(--pg-porte); border-radius: 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--pg-ink2);
}
.qsn-nots li b { color: var(--pg-ink); font-weight: 700; }
/* Un trait barré plutôt qu'une croix : la page dit un refus, pas une erreur.
   Le rose d'encre tient 4,68:1 sur la carte. */
.qsn-nots li::before {
  content: ''; position: absolute; left: 20px; top: 22px;
  width: 15px; height: 3px; border-radius: 2px; background: var(--pg-rose-i);
}

@media (max-width: 860px) {
  .qsn-jamais { grid-template-columns: 1fr; }
}