/* pages.css — styles des pages statiques SEO générées par build.js.
   S'appuie sur les variables de thème définies dans style.css (--bg, --text, etc.). */

.topnav { display: flex; gap: 1.25rem; margin-left: auto; margin-right: 1rem; flex-wrap: wrap; }
.topnav a { color: var(--text-secondary, #64748b); text-decoration: none; font-weight: 600; font-size: .95rem; }
.topnav a:hover { color: var(--primary, #2563EB); }

.page { padding-bottom: 3rem; }
.page section { margin: 2rem 0; }
.page h1 { font-size: 1.9rem; line-height: 1.2; margin: .5rem 0; }
.page h2 { font-size: 1.35rem; margin: 1.5rem 0 .75rem; }
.page .lead { font-size: 1.1rem; color: var(--text-secondary, #475569); max-width: 60ch; }
.page .muted { color: var(--text-secondary, #64748b); font-size: .92rem; }
.update-note { font-size: .85rem; color: var(--text-secondary, #64748b); margin-top: .75rem; }
.update-note i { margin-right: .35rem; }

/* Fil d'Ariane */
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1rem 0 .5rem; font-size: .85rem; }
.crumb a { color: var(--primary, #2563EB); text-decoration: none; }
.crumb .sep { color: var(--text-secondary, #94a3b8); }
.crumb [aria-current="page"] { color: var(--text-secondary, #64748b); }

/* Hero léger */
.hero-lite { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; padding: 1.75rem; }
.big-figures { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; }
.bf { display: flex; flex-direction: column; }
.bf-v { font-size: 1.8rem; font-weight: 800; color: var(--primary, #2563EB); }
.bf-l { font-size: .8rem; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: .03em; }

/* Grille de prix bakés */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.pc { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: .9rem 1rem; }
.pc-nom { font-weight: 700; font-size: .9rem; color: var(--text-secondary, #64748b); }
.pc-moy { font-size: 1.35rem; font-weight: 800; margin: .2rem 0; }
.pc-moy span { font-size: .7rem; font-weight: 500; color: var(--text-secondary, #94a3b8); }
.pc-min { font-size: .8rem; color: #16a34a; font-weight: 600; }

/* Tableaux de stations */
.table-wrap { overflow-x: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; }
.stations-baked { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stations-baked caption { text-align: left; padding: .75rem 1rem; font-weight: 700; font-size: .95rem; }
.stations-baked th, .stations-baked td { padding: .65rem 1rem; text-align: left; border-top: 1px solid var(--border, #eef2f7); }
.stations-baked thead th { background: var(--bg-alt, #f8fafc); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary, #64748b); }
.stations-baked .rank { font-weight: 800; color: var(--text-secondary, #94a3b8); width: 2.5rem; }
.stations-baked .prix { font-weight: 800; color: var(--primary, #2563EB); white-space: nowrap; text-align: right; }
.stations-baked .cp { color: var(--text-secondary, #94a3b8); font-size: .8rem; }
.stations-baked .adr { color: var(--text-secondary, #64748b); font-size: .8rem; }

/* Cartes de liens (maillage interne) */
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .65rem; }
.link-card { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; text-decoration: none; transition: border-color .15s, transform .15s; }
.link-card:hover { border-color: var(--primary, #2563EB); transform: translateY(-1px); }
.lc-t { font-weight: 700; color: var(--text, #0f172a); }
.lc-s { font-size: .82rem; color: var(--text-secondary, #64748b); }

.plein-list, .faq-baked { max-width: 60ch; }
.plein-list li { margin: .35rem 0; }

/* FAQ dépliable */
.faq-baked details { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: .5rem .9rem; margin: .5rem 0; background: var(--card-bg, #fff); }
.faq-baked summary { font-weight: 700; cursor: pointer; padding: .35rem 0; }
.faq-baked details p { margin: .5rem 0; color: var(--text-secondary, #475569); }

.hydrate-controls { margin: .5rem 0 1rem; }
.hydrate-controls select { padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border, #cbd5e1); background: var(--card-bg, #fff); color: var(--text, #0f172a); }

/* Footer régions */
.footer-regions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: center; }
.footer-regions a { color: var(--text-secondary, #94a3b8); text-decoration: none; font-size: .88rem; }
.footer-regions a:hover { color: var(--primary, #2563EB); }

@media (max-width: 640px) {
  .topnav { display: none; }
  .page h1 { font-size: 1.5rem; }
  .big-figures { gap: 1rem; }
  .bf-v { font-size: 1.4rem; }
}