/* ═══════════════════════════════════════════ CONCEPT — styles de page ═════
   Ne contient que ce qui n'existe pas dans base.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Cartouche : encart d'énumération posé en marge d'un texte ───────────── */
.cartouche {
  border-top: var(--filet-e) solid var(--trait);
  padding-top: var(--e-2);
  margin-top: var(--e-4);
}

.cartouche__liste {
  margin-top: var(--e-2);
  columns: 2;
  column-gap: var(--gouttiere);
}

@media (max-width: 720px) {
  .cartouche__liste { columns: 1; }
}

/* ── Négatifs : ce que le concept n'est pas. Termes barrés d'un filet ────── */
.negatifs {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-3);
}

.negatifs li {
  position: relative;
  font-family: var(--mono);
  font-weight: var(--poids-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--texte-pale);
  padding: var(--e-1) 0;
}

.negatifs li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--filet-e);
  background: var(--accent);
  opacity: .55;
}

.negatifs__suite { margin-top: var(--e-3); }

/* ── Les lieux d'accueil : sept typologies sur filets ────────────────────── */
.lieux {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  border-top: var(--filet-e) solid var(--trait);
}

.lieu {
  display: grid;
  grid-template-columns: var(--rail-num) minmax(0, 15em) minmax(0, 1fr);
  gap: 0 var(--gouttiere);
  align-items: baseline;
  padding: var(--sp-item) 0;
  border-bottom: var(--filet-e) solid var(--trait);
}

.lieu__num {
  font-family: var(--mono);
  font-weight: var(--poids-mono);
  font-size: var(--t-mono-s);
  letter-spacing: var(--ls-mono);
  color: var(--accent);
  text-transform: uppercase;
}

.lieu__nom {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: var(--poids-display);
  font-size: var(--t-titre-4);
  line-height: var(--lh-titre-s);
  letter-spacing: var(--ls-titre);
  color: var(--texte-fort);
}

.lieu__traits {
  font-family: var(--mono);
  font-weight: var(--poids-mono);
  font-size: var(--t-mono-s);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--texte-meta);
}

.lieu__signe {
  grid-column: 2 / -1;
  margin-top: var(--e-1);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  color: var(--texte-doux);
}

@media (max-width: 900px) {
  .lieu {
    grid-template-columns: var(--rail-num-s) minmax(0, 1fr);
    align-items: start;
  }
  .lieu__traits,
  .lieu__signe { grid-column: 2 / -1; }
  .lieu__traits { margin-top: var(--e-1); }
}