/* prix-carburants-fr — thème clair « panneau de prix », mobile-first.
   CSS maison, sans framework, sans polices ni tuiles externes.
   La base vise 320 px ; la navigation devient une colonne repliable sur
   mobile et une rangée complète à partir de 50 rem. Toutes les cibles
   tactiles font au moins 44 px (2,75 rem). */
:root {
  --fond: #f6f3ec;
  --panneau: #fffefb;
  --panneau-fonce: #ece6d8;
  --bordure: #d7cfbd;
  --texte: #1e242b;
  --atténue: #5b616b;
  --rouge: #9d2a22;
  --rouge-vif: #8c1f18;
  --lien: #8c1f18;
  --meilleur: #fdece7;
  --focus: #174ea6;
  --bleu: #214f79;
  --ombre: 0 1px 2px rgba(30, 36, 43, .06), 0 4px 14px rgba(30, 36, 43, .05);
  --rayon: .45rem;
  --espace-1: .25rem;
  --espace-2: .5rem;
  --espace-3: .75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
}
* { box-sizing: border-box; }
html {
  color-scheme: light;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.55;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -.01em;
}
p { text-wrap: pretty; }
::selection { background: var(--rouge); color: #fff; }

/* Accessibilité : lien d'évitement, focus visible partout, contrastes. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--rouge);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 0 0 var(--rayon) 0;
  font-weight: 700;
}
.skip:focus { left: 0; }
a { color: var(--lien); }
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.skip:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Icônes SVG maison, dessinées en trait courant. */
.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
}

/* En-tête « panneau de prix ». */
header.site {
  background: linear-gradient(180deg, #fbf8f1 0%, var(--panneau-fonce) 100%);
  border-bottom: 4px solid var(--rouge);
  padding: .85rem .9rem;
}
header.site .bandeau {
  max-width: 70rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
header.site a.marque {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--texte);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
header.site a.marque .logo { flex: none; border-radius: .35rem; box-shadow: var(--ombre); }
header.site a.marque .nom span { color: var(--rouge-vif); }
header.site p {
  margin: .1rem 0 0;
  font-size: .88rem;
  color: var(--atténue);
}

.recherche-accueil {
  display: grid;
  gap: 1rem;
  margin: 1.1rem 0 1.5rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--bordure);
  border-top: .3rem solid var(--rouge);
  border-radius: var(--rayon);
  background: var(--panneau);
  box-shadow: var(--ombre);
}
.sur-titre { margin: 0 0 .25rem; color: var(--rouge-vif); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.recherche-accueil h2, .page-intro h1 { margin-top: 0; }
.recherche-form label { display: block; margin-bottom: .35rem; font-weight: 700; }
.recherche-ligne { display: flex; flex-wrap: wrap; gap: .55rem; }
.recherche-ligne input {
  flex: 1 1 14rem;
  min-height: 2.85rem;
  padding: .7rem .8rem;
  border: 2px solid var(--bordure);
  border-radius: .4rem;
  background: #fff;
  color: var(--texte);
  font: inherit;
}
.recherche-ligne input:focus { border-color: var(--focus); outline: 3px solid var(--focus); outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent); }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.recherche-ligne button {
  min-height: 2.85rem;
  padding: .7rem 1.1rem;
  border: 2px solid var(--rouge-vif);
  border-radius: .4rem;
  background: var(--rouge-vif);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.recherche-ligne button:hover { background: var(--rouge); }
.recherche-page { max-width: 44rem; margin: 1rem 0 1.5rem; }
.resultats-locaux { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.resultats-locaux a { display: grid; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--bordure); border-radius: .4rem; background: var(--panneau); text-decoration: none; }
.resultats-locaux a:hover { border-color: var(--rouge); box-shadow: var(--ombre); }
.resultats-locaux span { color: var(--atténue); font-size: .9rem; }
.geo-raccourci { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.geo-raccourci button, .geo-form button, .action-itineraire {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .6rem .9rem; border: 2px solid var(--bleu);
  border-radius: .4rem; background: var(--panneau); color: var(--bleu); font: inherit;
  font-weight: 800; cursor: pointer; text-decoration: none;
}
.geo-raccourci button:disabled, .geo-form button:disabled { cursor: wait; opacity: .65; }
.geo-raccourci span, .geo-status { color: var(--atténue); font-size: .88rem; }
.geo-form {
	display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .8rem; align-items: end; margin: 1rem 0 1.4rem; padding: 1rem;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--panneau);
}
.geo-form label { display: block; margin-bottom: .3rem; font-weight: 700; }
.geo-form select { width: 100%; min-height: 2.75rem; padding: .55rem; border: 2px solid var(--bordure); border-radius: .4rem; background: #fff; color: var(--texte); font: inherit; }
.geo-form .geo-status { grid-column: 1 / -1; margin: 0; }
.stations-locales { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.stations-locales article { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--panneau); box-shadow: var(--ombre); }
.stations-locales article > div { display: grid; gap: .2rem; }
.stations-locales article span { color: var(--atténue); }
.google-map { width: 100%; min-height: 24rem; border: 0; border-radius: .45rem; background: var(--panneau-fonce); }
.fuel-filter { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0; }
.fuel-filter button { min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--bordure); border-radius: 999px; background: #fff; color: var(--texte); font: inherit; font-weight: 750; cursor: pointer; }
.fuel-filter button.actif { border-color: var(--rouge); background: var(--rouge); color: #fff; }
.geo-ville { margin: .25rem 0 .9rem; }
.best-live { min-height: 1.5rem; padding: .75rem; border-left: .25rem solid var(--vert); background: #f2faf3; }
.note-proximite { padding: .8rem; border-left: .25rem solid #a76600; background: #fff7e8; }
.station-identite { display: inline-flex; align-items: flex-start; gap: .55rem; }
.station-identite > .icone { flex: none; width: 1.5rem; height: 1.5rem; color: var(--rouge); }
.brand-logo { display: inline-block; margin: 0 .45rem .2rem 0; padding: .14rem .38rem; border: 1px solid #727272; border-radius: .28rem; background: #fff; color: #303030; font-size: .68rem; font-weight: 900; letter-spacing: .025em; line-height: 1.2; text-decoration: none; vertical-align: .1rem; }
.brand-logo[data-brand^="Total"] { border-color: #d71920; color: #b5121b; }
.brand-logo[data-brand^="Carrefour"] { border-color: #1763a5; color: #1763a5; }
.brand-logo[data-brand^="E. Leclerc"] { border-color: #2774b8; color: #e36c09; }
.brand-logo[data-brand^="Intermarch"] { border-color: #d71920; color: #c4161c; }
.brand-logo[data-brand^="Esso"] { border-color: #17569b; color: #d51f2b; }
.brand-logo[data-brand^="Shell"] { border-color: #d8232a; background: #ffd500; color: #d8232a; }
.badge.aujourd-hui { background: #e7f6e9; border-color: #3a7f47; color: #21602d; }
.badge.recent { background: #eef5ff; border-color: #5b79a3; color: #31577f; }
.resume-bas { margin-top: 1.5rem; }
.js table.prix.ville { min-width: 0; }
.js table.prix.ville th[hidden], .js table.prix.ville td[hidden] { display: none; }
.js table.prix.ville .last-column { display: none; }
.prix-local strong { color: var(--rouge-vif); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.attributs-station { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.attributs-station li { padding: .25rem .45rem; border-radius: 999px; background: var(--panneau-fonce); font-size: .78rem; }

/* Navigation principale : repli natif (<details>) sur mobile, rangée
   complète à partir de 50 rem. Cibles tactiles ≥ 44 px. */
nav.nav-site {
  background: var(--panneau);
  border-bottom: 1px solid var(--bordure);
}
.nav-site-conteneur {
  max-width: 70rem;
  margin: 0 auto;
}
.nav-mobile { border: 0; }
.nav-mobile > .nav-list { display: none !important; }
.nav-mobile[open] > .nav-list { display: flex !important; }
.nav-list.nav-desktop { display: none; }
.nav-mobile > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem .7rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--texte);
  border-bottom: 1px solid transparent;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }
.nav-mobile[open] > summary { border-bottom-color: var(--bordure); }
.nav-bouton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.nav-chevron {
  display: inline-flex;
  color: var(--atténue);
  transition: transform .18s ease;
}
.nav-mobile[open] .nav-chevron { transform: rotate(180deg); }
.nav-list {
  list-style: none;
  margin: 0;
  padding: .3rem .5rem .7rem;
  display: grid;
  gap: .15rem;
}
.nav-list .nav-titre {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atténue);
  padding: .55rem .35rem .25rem;
}
.nav-list a {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .55rem .55rem;
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
}
.nav-list a:hover {
  background: var(--panneau-fonce);
  color: var(--rouge-vif);
}
.nav-code {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rouge-vif);
  background: var(--meilleur);
  border: 1px solid var(--bordure);
  border-radius: .2rem;
  padding: .08rem .3rem;
}
.nav-libelle { font-size: .92rem; }

/* Fil d'Ariane. */
nav.fil {
  max-width: 70rem;
  margin: 0 auto;
  padding: .6rem .9rem 0;
  font-size: .88rem;
  color: var(--atténue);
}
nav.fil ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
nav.fil li + li::before { content: "›"; margin-right: .35rem; color: var(--bordure); }
nav.fil a { color: var(--lien); text-decoration-thickness: 1px; }

/* Contenu principal. */
main {
  max-width: 70rem;
  margin: 0 auto;
  padding: .6rem .9rem 2rem;
  scroll-margin-top: .5rem;
}
h1 {
  font-size: 1.48rem;
  line-height: 1.2;
  margin: .9rem 0 .3rem;
}
h2 {
  font-size: 1.14rem;
  margin-top: 1.9rem;
  border-left: 5px solid var(--rouge);
  padding-left: .6rem;
}
h3 { font-size: 1rem; }
.date-snapshot {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  color: var(--atténue);
  font-size: .93rem;
  margin: .3rem 0 1rem;
}
.date-snapshot .icone { color: var(--rouge); margin-top: .22rem; }

/* Panneau de prix national. */
.panneau-prix {
  display: grid;
  gap: .75rem;
  margin: 1.1rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.carte-carburant {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--rouge);
  border-radius: var(--rayon);
  padding: .7rem .75rem;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.carte-carburant .carburant {
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.carte-carburant .prix {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  margin: .05rem 0;
}
.carte-carburant .unite { font-size: .8rem; color: var(--atténue); }
.carte-carburant .dates { font-size: .76rem; color: var(--atténue); line-height: 1.4; }
.carte-carburant a { text-decoration: none; }
.carte-carburant a:hover .carburant { text-decoration: underline; }

/* Tableaux de prix : défilement horizontal accessible, entête collante. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--panneau);
  box-shadow: var(--ombre);
}
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table-scroll table.prix { margin: 0; }
table.prix {
  border-collapse: collapse;
  width: 100%;
  min-width: 100%;
  background: var(--panneau);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
table.prix.ville { min-width: 44rem; }
table.prix.station { min-width: 30rem; }
table.prix.carburant { min-width: 26rem; }
table.prix.departement { min-width: 34rem; }
table.prix.historique { min-width: 0; }
table.prix caption {
  text-align: left;
  font-weight: 600;
  padding: .55rem .6rem;
  color: var(--texte);
}
table.prix th, table.prix td {
  border: 1px solid var(--bordure);
  padding: .55rem .6rem;
  text-align: left;
  vertical-align: top;
}
table.prix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--rouge);
  color: #fff;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .18);
}
table.prix td.prix, table.prix th.prix { text-align: right; font-weight: 700; }
table.prix td .releve {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--atténue);
}
table.prix tbody tr:nth-child(even) td { background: #faf7ef; }
table.prix tbody tr:hover td { background: #fbf7ef; }
table.prix td.meilleur {
  background: var(--meilleur);
  box-shadow: inset 0 -3px 0 var(--rouge-vif);
}
table.prix td.vide { color: var(--atténue); text-align: center; }

.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--bordure);
  border-radius: .2rem;
  padding: .06rem .38rem;
  margin-left: .35rem;
  color: var(--atténue);
  vertical-align: middle;
  white-space: nowrap;
}
.badge.ancien {
  border-color: var(--rouge-vif);
  color: var(--rouge-vif);
  background: var(--meilleur);
}
.badge.frais {
  border-color: #3d7a4d;
  color: #2f6440;
  background: #edf6ef;
}

/* Cartes/blocs. */
.encart {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--rouge);
  border-radius: var(--rayon);
  padding: .85rem .95rem;
  margin: 1.1rem 0;
  box-shadow: var(--ombre);
}
.encart.alerte { border-left-color: var(--rouge-vif); }
.encart h3 { margin-top: 0; }

.resume {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--rouge);
  border-radius: var(--rayon);
  padding: .75rem .95rem;
  margin: .8rem 0 1.1rem;
  font-size: .95rem;
  box-shadow: var(--ombre);
}

.totem {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-top: 5px solid var(--rouge);
  border-radius: var(--rayon);
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: var(--ombre);
}
.totem table.prix { background: transparent; }
.totem table.prix th, .totem table.prix td { border-color: var(--bordure); }

/* Carte à coordonnées réelles, quadrillage discret. */
.carte-svg {
  display: block;
  width: 100%;
  height: auto;
  background:
    linear-gradient(rgba(33, 79, 121, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 79, 121, .05) 1px, transparent 1px),
    #e9edf2;
  background-size: 1.1rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.carte-svg .carte-fond { fill: #e9edf2; }
.carte-svg .point circle {
  fill: var(--rouge);
  stroke: #fff;
  stroke-width: 1.4;
  transition: r .18s ease;
}
.carte-svg .point text {
  fill: #fff;
  font-size: 7.5px;
  font-weight: 700;
  text-anchor: middle;
}
.carte-legend {
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .2rem .9rem;
  font-size: .9rem;
}
.carte-note { margin: .55rem 0 0; font-size: .8rem; color: var(--atténue); }
.historique-note { margin: .55rem 0 0; font-size: .8rem; color: var(--atténue); }

/* Meilleurs prix d'une commune (réponse immédiate, données réelles). */
.meilleurs-prix-grille {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.meilleur-prix {
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--rouge);
  border-radius: var(--rayon);
  background: var(--panneau);
  padding: .55rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .9rem;
}
.meilleur-carburant {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atténue);
}
.meilleur-valeur {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}

/* Mini-graphes SVG des relevés archivés : aucune donnée inventée, aucun
   JavaScript, points calculés côté serveur. */
.mini-graphes {
  display: grid;
  gap: .9rem;
  margin-top: .8rem;
}
.mini-graphe { margin: 0; }
.mini-graphe-svg {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.mini-graphe-svg .grille {
  stroke: var(--bordure);
  stroke-width: 1;
}
.mini-graphe-svg .trait {
  fill: none;
  stroke: var(--rouge-vif);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mini-graphe-svg circle {
  fill: var(--rouge-vif);
  stroke: #fff;
  stroke-width: 1;
}
.mini-graphe figcaption {
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--atténue);
}

/* Listes, classements, villes. */
ul.villes, ol.classement { padding-left: 1.25rem; }
ul.villes li, ol.classement li { margin-bottom: .3rem; }
ul.villes .nb, ol.classement .nb { color: var(--atténue); font-size: .85rem; }

ul.prix-proches {
  list-style: none;
  padding-left: 0;
  margin: .3rem 0 0;
}
ul.prix-proches li {
  font-size: .88rem;
  color: var(--texte);
  margin-bottom: .15rem;
}
ul.prix-proches .releve { font-size: .72rem; color: var(--atténue); }
ul.services { padding-left: 1.25rem; }
ul.services li { margin-bottom: .35rem; }
ul.horaires { margin: .2rem 0 .4rem; }

/* États vides et erreurs utiles. */
.etat-vide {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: var(--panneau);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: .9rem 1rem;
  margin: 1.1rem 0;
  color: var(--atténue);
}
.etat-vide-icone { flex: none; color: var(--rouge); }
.etat-vide p { margin: 0; }
.erreur {
  max-width: 38rem;
  margin: 2rem auto;
  text-align: center;
}
.erreur-code {
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--rouge);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.erreur-icone {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: .6rem;
  color: var(--rouge);
}
.erreur h1 { margin-top: .2rem; }
.erreur-liens {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: .5rem;
}
.erreur-liens a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .45rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--panneau);
  color: var(--lien);
  font-weight: 600;
  text-decoration: none;
}
.erreur-liens a:hover { border-color: var(--rouge); background: var(--meilleur); }

.provenance {
  background: var(--panneau-fonce);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .85rem .95rem;
  margin: 1.6rem 0 0;
  font-size: .85rem;
  color: var(--atténue);
}

footer.site {
  border-top: 4px solid var(--rouge);
  background: var(--panneau-fonce);
  margin-top: 2rem;
  padding: 1.1rem 1rem 1.3rem;
  font-size: .85rem;
  color: var(--atténue);
}
footer.site p { max-width: 70rem; margin: .35rem auto; }
footer.site a { color: var(--lien); }
footer.site .source-icone {
  display: inline-flex;
  vertical-align: -.2em;
  margin-right: .25rem;
  color: var(--rouge);
}
footer.site nav.pied {
  max-width: 70rem;
  margin: .6rem auto 0;
  padding-top: .6rem;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  align-items: baseline;
}
code.empreinte {
  font-size: .8em;
  word-break: break-all;
  color: var(--atténue);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --fond: #ffffff;
    --panneau: #ffffff;
    --panneau-fonce: #f3f0e8;
    --bordure: #6d6a62;
    --texte: #000000;
    --atténue: #30353c;
    --rouge: #7d150e;
    --rouge-vif: #6d110b;
    --lien: #174ea6;
  }
  table.prix th, table.prix td { border-color: #6d6a62; }
  .carte-svg { border-color: #6d6a62; }
}

@media (forced-colors: active) {
  .carte-svg .point circle { forced-color-adjust: none; }
}

@media (min-width: 40rem) {
	.geo-form { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
	.stations-locales article { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
	.stations-locales .attributs-station { grid-column: 1 / -1; }
  header.site { padding: .95rem 1rem; }
  header.site a.marque { font-size: 1.28rem; letter-spacing: .04em; gap: .6rem; }
  main { padding: .6rem 1rem 2.2rem; }
  h1 { font-size: 1.62rem; }
  .panneau-prix {
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  }
  ul.villes, ol.classement { columns: 2; column-gap: 2rem; }
  ul.villes li, ol.classement li { break-inside: avoid; }
  .carte-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erreur-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 50rem) {
  .nav-mobile { display: none; }
  .nav-list.nav-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .4rem;
    padding: .35rem .5rem;
  }
  .nav-list .nav-titre { padding: .45rem .15rem .2rem; }
  .nav-list a {
    justify-content: center;
    min-width: 2.75rem;
    border: 1px solid var(--bordure);
    background: var(--panneau);
    font-size: .84rem;
  }
  .nav-list a:hover { border-color: var(--rouge); }
}

@media (min-width: 60rem) {
  ul.villes, ol.classement { columns: 3; }
  .carte-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  header.site, nav.nav-site, nav.fil, footer.site, .provenance, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .table-scroll { overflow: visible; border: 0; box-shadow: none; }
  table.prix { min-width: 0; }
  table.prix thead th { position: static; background: #eee; color: #000; }
  .carte-svg { break-inside: avoid; }
  .mini-graphe-svg { border: 0; max-width: none; }
  .mini-graphe, .meilleur-prix { break-inside: avoid; }
}