:root { --bleu: #1f5fbf; --bleu-fonce: #173f7d; --vert: #1a8f4c; --orange: #c77700; --texte: #1d232b; --gris: #5b6572; --fond: #f5f7fa; --bord: #dde3ea; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--texte); background: #fff; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 18px; }
a { color: var(--bleu); }
a:hover { color: var(--bleu-fonce); }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .6em 0 .4em; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 1.8em 0 .5em; }
h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.site-header { background: var(--bleu); color: #fff; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 12px; padding-bottom: 12px; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; display: inline-flex; align-items: center; gap: 8px; }
.logo em { font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.logo-p { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 6px; font-weight: 800; }
.logo:hover { color: #fff; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.nav a { color: #fff; text-decoration: none; font-size: .95rem; opacity: .92; }
.nav a:hover { color: #fff; text-decoration: underline; }
.ariane { font-size: .88rem; color: var(--gris); margin-top: 14px; }
.ariane a { color: var(--gris); }
.chapo { font-size: 1.12rem; }
.verif { font-size: .9rem; color: var(--gris); margin-top: -.4em; }
.maintenant { background: var(--fond); border: 1px solid var(--bord); border-left: 5px solid var(--bleu); border-radius: 8px; padding: 14px 18px; margin: 1.4em 0; }
.maintenant h2 { margin: 0 0 .4em; font-size: 1.15rem; }
.badge { display: inline-block; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; border-radius: 6px; padding: 2px 12px; margin: 0 0 .3em; }
.badge-gratuit { background: var(--vert); }
.badge-payant { background: var(--orange); }
.maintenant-phrase { margin: .2em 0; }
.maintenant-zones { margin: .3em 0; padding-left: 1.2em; font-size: .95rem; }
.maintenant-note, .reserve { font-size: .85rem; color: var(--gris); margin: .5em 0 0; }
.maintenant-choix { margin-top: .6em; font-size: .92rem; }
.maintenant-choix input { font: inherit; padding: 3px 6px; border: 1px solid var(--bord); border-radius: 5px; }
ul.lieux { padding-left: 1.1em; }
ul.lieux li { margin: .55em 0; }
.confiance { display: inline-block; font-size: .78rem; border-radius: 4px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.confiance-haute { background: #e3f4ea; color: #145f35; }
.confiance-moyenne { background: #fff3dc; color: #7a4a00; }
.confiance-basse { background: #f3e5e5; color: #7d2323; }
.chiffres { background: var(--fond); border-radius: 8px; padding: 4px 18px 10px; margin-top: 1.8em; }
.chiffres h2 { margin-top: .8em; }
.carte { height: 380px; border-radius: 8px; border: 1px solid var(--bord); background: var(--fond); }
.legende { font-size: .85rem; color: var(--gris); }
.pt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: -1px; }
.pt-gratuit { background: var(--vert); } .pt-relais { background: var(--bleu); } .pt-partiel { background: var(--orange); }
.voisines { margin-top: 1.6em; }
.fiche-sources { font-size: .88rem; color: var(--gris); border-top: 1px solid var(--bord); margin-top: 2em; padding-top: .8em; overflow-wrap: anywhere; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.cartes li { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; }
.cartes li a { font-weight: 700; text-decoration: none; }
.cartes li p { margin: .3em 0 0; font-size: .92rem; color: var(--gris); }
.faq dt { font-weight: 700; margin-top: 1em; }
.faq dd { margin: .3em 0 0; }
.site-footer { background: #1d232b; color: #c9d1db; margin-top: 3em; padding: 22px 0; font-size: .92rem; }
.site-footer a { color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }
.attribution { font-size: .85rem; }
@media (max-width: 560px) { body { font-size: 16px; } h1 { font-size: 1.55rem; } .carte { height: 300px; } }
details { margin: .4em 0; } details summary { cursor: pointer; color: var(--bleu); font-weight: 600; }
.cartes .statut-ville { display: block; margin: .5em 0 0; font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cartes .statut-ville:empty { display: none; }