/* ============================================================
   LISIBILITÉ DES PAGES DE CONTENU (2026-10-05, demande du user)
   « rend le tout plus lisible » + « tu as perdu des infos, par exemple les prix ».

   ⚠️ Les prix etaient dans des cartes etroites (min-width 320) a la meme taille
   que le reste. Ici : cartes plus LARGES, prix en gros et en gras, chiffres cles
   en bandeau, listes de villes en colonnes. On augmente la taille ET l'air.
   ============================================================ */

/* ---- BANDEAU DE CHIFFRES CLÉS ---- */
.n-kpi {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 1.4rem 0 0; border: 1px solid var(--n-rule);
}
.n-kpi > div { padding: .9rem 1rem; border-right: 1px solid var(--n-rule); }
.n-kpi > div:last-child { border-right: 0; }
.n-kpi dt {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--n-dim); margin: 0;
}
.n-kpi dd {
  margin: .35rem 0 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem; line-height: 1.1;
}
@media (max-width: 760px) { .n-kpi { grid-template-columns: repeat(2, 1fr); } }

/* ---- CARROUSEL DES PRIX : plus large, plus lisible ---- */
.n-car--prix .n-car-item {
  min-width: min(92vw, 380px);
  padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
}
.n-car--prix .n-car-item h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; }
.n-car--prix .n-prix {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2rem; font-weight: 500; line-height: 1;
  letter-spacing: -.02em; margin: 0;
}
.n-car--prix .n-prix-unite {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--n-dim); margin: 0;
}

/* ---- ÉCRAN « PRIX » : un peu plus d'air, sans déborder ---- */
.n-screen--prix { justify-content: flex-start; padding-top: 6.5rem; }
.n-screen--prix .n-title { font-size: var(--n-titre); max-width: 30ch; }
.n-screen--prix .n-sub { line-height: 1.7; max-width: 64ch; }

/* ---- DÉTAILS : plusieurs colonnes sur grand écran, empilés sur mobile ---- */
.n-detail--grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .4rem 1.6rem; max-width: none; margin-top: 1.2rem;
  align-items: start;
}
.n-detail--grid details { border-top: 1px solid var(--n-rule); padding: .7rem 0; }
.n-detail--grid summary {
  cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-fg);
  display: flex; justify-content: space-between; align-items: center;
}
.n-detail--grid summary::after { content: "+"; color: var(--n-dim); font-size: 1rem; }
.n-detail--grid details[open] summary::after { content: "–"; }
.n-detail--grid p { font-size: .95rem; line-height: 1.7; margin: .7rem 0 0; }

/* ---- LISTES DE VILLES / MÉTIERS : colonnes compactes ---- */
.n-villes {
  list-style: none; padding: 0; margin: .7rem 0 0;
  columns: 2; column-gap: 1.4rem; font-size: .92rem;
}
.n-villes li { break-inside: avoid; padding: .18rem 0; }
.n-villes a { color: var(--n-fg); text-decoration: none; }
.n-villes a:hover { text-decoration: underline; }
@media (max-width: 560px) { .n-villes { columns: 1; } }

/* ---- lisibilité générale des pages de contenu ---- */
.n-screen--prix .n-sub, .n-lecture__corps, .n-formwrap { line-height: 1.7; }
.n-detail summary { line-height: 1.5; }