/* ============================================================
   Prix à la Pompe — design system "Totem"
   Concept : le panneau de prix de station (totem) comme signature.
   Typo : Archivo (variable, self-hostée) — héritage signalétique routière.
   Rayons : interactifs = pilule (999px), conteneurs = 12px, champs = 10px.
   Accent unique : ambre signalétique. Vert réservé au sémantique
   "prix le plus bas" dans les données. Thème auto light/dark.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#f4f4f1;
  --surface:#ffffff;
  --ink:#191c20;
  --muted:#5e6670;
  --line:#e3e3dd;
  --line-strong:#c9cac2;

  --accent:#f6b40e;          /* ambre signalétique */
  --accent-hover:#ffc42e;
  --accent-ink:#1b1400;      /* texte sur ambre */
  --accent-deep:#8a6400;     /* ambre lisible sur fond clair */

  --panel:#16191d;           /* asphalte : totem, header, footer */
  --panel-2:#1f2329;
  --panel-ink:#f2f3f4;
  --panel-muted:#9aa3ac;
  --panel-line:rgba(255,255,255,.09);

  --best:#0b7a4e;            /* sémantique : prix le plus bas */
  --best-soft:#e3f3ea;
  --warn:#96501d;
  --warn-soft:#faeee1;
  --focus:#2f6feb;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101214;
    --surface:#17191d;
    --ink:#e9eaec;
    --muted:#9aa2ab;
    --line:#25292e;
    --line-strong:#3a3f46;
    --accent-deep:#e5ab19;
    --best:#4cc38a;
    --best-soft:rgba(40,130,88,.22);
    --warn:#e09a5d;
    --warn-soft:rgba(150,80,29,.18);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 16px/1.6 'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color .15s ease}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

h1{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.02em;font-weight:740;margin:.6em 0 .35em;text-wrap:balance}
h2{font-size:1.4rem;line-height:1.2;letter-spacing:-.012em;font-weight:680;margin:2.4em 0 .7em}
h3{font-size:1.05rem;font-weight:650;margin:1.4em 0 .4em}
small{color:var(--muted);display:block;font-size:.8rem}
.lede{color:var(--muted);max-width:62ch;font-size:1.06rem}
.num,td.prix,.totem-price,.kpi .v,.res-price{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Header ---------- */
.site-header{background:var(--panel);padding:0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--panel-ink);font-size:1.06rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{flex:none;display:block}
@media (max-width:560px){.brand{font-size:.95rem;gap:8px}}
.site-header nav{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.site-header nav::-webkit-scrollbar{display:none}
.site-header nav a{color:var(--panel-muted);font-size:.92rem;font-weight:520;text-decoration:none;padding:8px 11px;border-radius:999px;white-space:nowrap;transition:color .15s ease,background .15s ease}
.site-header nav a:hover{color:var(--panel-ink);background:var(--panel-2)}
.site-header nav a.nav-cta{background:var(--accent);color:var(--accent-ink);font-weight:650;padding:9px 16px;margin-left:6px;display:inline-flex;align-items:center;gap:7px}
.site-header nav a.nav-cta:hover{background:var(--accent-hover);color:var(--accent-ink)}
.site-header nav a.nav-cta svg{width:15px;height:15px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:13px 24px;font:650 1rem/1.2 'Archivo',system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s ease,transform .12s ease}
.btn:hover{background:var(--accent-hover);text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:19px;height:19px;flex:none}
.btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 6px}

/* ---------- Hero (home) ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(26px,4.5vw,54px) 0 clamp(20px,3vw,36px)}
.hero h1{margin-top:.2em}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:26px}}

.badge-maj{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;margin:10px 0 2px}
.badge-maj::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--best);flex:none}
@media (prefers-reduced-motion:no-preference){
  .badge-maj::before{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
}

/* ---------- Totem (panneau de prix) ---------- */
.totem{background:var(--panel);border-radius:12px;border-top:6px solid var(--accent);color:var(--panel-ink);overflow:hidden;box-shadow:0 14px 40px -18px rgba(18,20,24,.45)}
.totem-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 20px 10px;color:var(--panel-muted);font-size:.82rem}
.totem-head strong{color:var(--panel-ink);font-weight:640;font-size:.9rem}
.totem-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 20px;border-top:1px solid var(--panel-line);color:var(--panel-ink);text-decoration:none;transition:background .15s ease}
.totem-row:hover{background:var(--panel-2);text-decoration:none}
.totem-row .fuel{font-weight:640;font-size:1rem}
.totem-row .from{color:var(--panel-muted);font-size:.8rem;font-weight:400;margin-left:8px}
.totem-price{color:var(--accent);font-size:1.45rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.totem-price em{font-style:normal;font-size:.8rem;color:var(--panel-muted);font-weight:500;margin-left:4px}
.totem-foot{padding:11px 20px 14px;border-top:1px solid var(--panel-line);color:var(--panel-muted);font-size:.82rem}
.totem-foot b{color:var(--panel-ink);font-weight:600}

/* ---------- KPIs (pages ville / département / carburant) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;transition:border-color .15s ease,transform .12s ease}
.kpi:hover{border-color:var(--line-strong);text-decoration:none;transform:translateY(-1px)}
.kpi .v{font-size:1.42rem;font-weight:720;letter-spacing:-.01em}
.kpi .l{font-size:.8rem;color:var(--muted);margin-top:2px}
.kpi .m{font-size:.76rem;color:var(--muted)}

/* ---------- Tableaux de stations ---------- */
.table-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:16px 0}
table.stations{width:100%;border-collapse:collapse;font-size:.93rem;min-width:660px}
table.stations th{text-align:left;padding:11px 14px;font-size:.72rem;font-weight:640;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--line)}
table.stations td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.stations tbody tr:first-child td{border-top:0}
table.stations tbody tr{transition:background .12s ease}
table.stations tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
td.prix{white-space:nowrap;text-align:right;font-weight:560}
td.prix.best{color:var(--best);font-weight:740;background:var(--best-soft)}

/* ---------- Grilles d'annuaire (villes, départements) ---------- */
.grid-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 10px;padding:0;margin:14px 0;list-style:none}
.grid-links a{display:block;padding:8px 10px;border-radius:8px;font-size:.92rem;text-decoration:none;transition:background .12s ease}
.grid-links a:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.grid-links small{display:inline;color:var(--muted)}

/* ---------- Cartes / alertes / divers ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:16px 0}
.card h2:first-child,.card h3:first-child{margin-top:0}
.alert{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn);border-radius:12px;padding:13px 17px;margin:16px 0;font-size:.93rem}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-top:16px}
.breadcrumb a{color:var(--muted)}
.spark{margin:8px 0}
.spark polyline{stroke:var(--accent-deep)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){.cols-2{grid-template-columns:1fr}}

/* ---------- Finder "Autour de moi" ---------- */
.finder{background:var(--panel);border-radius:12px;border-top:6px solid var(--accent);color:var(--panel-ink);padding:clamp(20px,3.5vw,30px);margin:20px 0 8px}
.finder .lede{color:var(--panel-muted)}
.finder-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:4px 0 18px}
.finder-sep{color:var(--panel-muted);font-size:.88rem}
.finder-search{display:flex;gap:8px;flex:1;min-width:230px;max-width:420px}
.finder-search input{flex:1;background:var(--panel-2);border:1px solid var(--panel-line);border-radius:10px;color:var(--panel-ink);font:400 .95rem 'Archivo',system-ui,sans-serif;padding:11px 14px;min-width:0}
.finder-search input::placeholder{color:var(--panel-muted)}
.finder-search input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.finder-opts{display:flex;gap:18px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--panel-line);padding-top:16px}
.finder-opts .opt-label{font-size:.8rem;color:var(--panel-muted);display:block;margin-bottom:7px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--panel-line);color:var(--panel-muted);font-size:.88rem;font-weight:560;transition:all .13s ease}
.seg label:hover span{color:var(--panel-ink);border-color:var(--panel-muted)}
.seg label:has(input:checked) span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:660}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Résultats ---------- */
.res-status{color:var(--muted);font-size:.92rem;margin:18px 0 10px;min-height:1.4em}
.res-status.err{color:var(--warn)}
.res-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.res-item{display:grid;grid-template-columns:auto 1fr auto;gap:6px 18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.res-item.top{border-color:color-mix(in srgb,var(--best) 45%,var(--line));box-shadow:inset 3px 0 0 var(--best)}
.res-price{font-size:1.5rem;font-weight:740;letter-spacing:-.01em;white-space:nowrap}
.res-price em{font-style:normal;font-size:.78rem;color:var(--muted);font-weight:500;display:block;text-align:right}
.res-item.top .res-price{color:var(--best)}
.res-body{min-width:0}
.res-body .name{font-weight:660}
.res-body .addr{color:var(--muted);font-size:.86rem;display:block}
.res-body .others{color:var(--muted);font-size:.8rem;margin-top:3px;display:block}
.res-side{text-align:right;white-space:nowrap}
.res-side .dist{font-weight:640;font-size:.95rem;display:block}
.res-side a{font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px;margin-top:5px}
.res-side a svg{width:13px;height:13px}
@media (max-width:640px){
  .res-item{grid-template-columns:1fr auto}
  .res-price{grid-column:1;grid-row:1;font-size:1.3rem}
  .res-side{grid-column:2;grid-row:1 / span 2;align-self:start}
  .res-body{grid-column:1}
}

/* Squelettes de chargement */
.skel{border-radius:12px;border:1px solid var(--line);background:var(--surface);height:74px;position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--ink) 5%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.4s ease infinite}
  @keyframes shimmer{to{transform:translateX(100%)}}
}

/* ---------- Actualité ---------- */
.home-actu-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.home-actu-head h2{margin-bottom:0}
.home-actu-head a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:560}
.home-actu{list-style:none;padding:0;margin:18px 0 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.home-actu a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;height:100%;transition:border-color .15s ease,transform .12s ease}
.home-actu a:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.home-actu img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.home-actu time{display:block;color:var(--muted);font-size:.78rem;padding:12px 16px 0}
.home-actu strong{display:block;font-size:1.02rem;font-weight:670;line-height:1.3;padding:5px 16px 0}
.home-actu span{display:block;color:var(--muted);font-size:.86rem;line-height:1.5;padding:6px 16px 16px}
@media (max-width:860px){.home-actu{grid-template-columns:1fr}.home-actu img{aspect-ratio:2.4/1}}

.actu-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.actu-item a{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;text-decoration:none;transition:border-color .15s ease,transform .12s ease}
.actu-item a:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.actu-item img{width:150px;height:92px;object-fit:cover;border-radius:8px}
.actu-item time{color:var(--muted);font-size:.8rem;display:block;margin-bottom:4px}
.actu-item strong{font-size:1.08rem;font-weight:680;line-height:1.3;display:block}
.actu-item p{color:var(--muted);font-size:.9rem;margin:6px 0 0}
@media (max-width:560px){.actu-item a{grid-template-columns:1fr}.actu-item img{width:100%;height:auto;aspect-ratio:16/9}}

.article-body{max-width:760px}
.article-body h2{margin-top:1.8em}
.article-body p,.article-body li{line-height:1.7}
.article-body img{max-width:100%;height:auto;border-radius:12px}
.article-hero{margin:22px 0}
.article-hero img{width:100%;height:auto}
.article-hero figcaption,.article-body figcaption{color:var(--muted);font-size:.78rem;margin-top:6px}
.article-body figure{margin:22px 0}
.article-body figcaption{color:var(--muted);font-size:.82rem;margin-top:8px}
.article-body blockquote{margin:18px 0;padding:4px 20px;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
.article-body table{width:100%;border-collapse:collapse;font-size:.93rem;margin:16px 0;display:block;overflow-x:auto}
.article-body table tbody{display:table;width:100%;min-width:520px}
.article-body table thead{display:table;width:100%;min-width:520px}
.article-body table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.article-body table td{padding:8px 10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.author-box{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:26px 0}
.author-box svg{flex:none;margin-top:2px}
.author-box strong{font-size:.95rem}
.author-box p{margin:4px 0 0;font-size:.88rem;color:var(--muted);line-height:1.55}
.article-sources{padding-left:18px;margin:10px 0}
.article-sources li{margin:6px 0;font-size:.92rem}
.article-sources small{display:inline}

/* ---------- Footer ---------- */
.site-footer{margin-top:64px;background:var(--panel);color:var(--panel-muted);font-size:.88rem}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:30px}
.site-footer .f-brand{color:var(--panel-ink);font-weight:700;display:inline-flex;align-items:center;gap:9px;margin-bottom:10px}
.site-footer p{margin:6px 0;line-height:1.55}
.site-footer a{color:var(--panel-muted);text-decoration-color:var(--panel-line)}
.site-footer a:hover{color:var(--panel-ink);text-decoration-color:var(--accent)}
.site-footer .f-title{color:var(--panel-ink);font-weight:640;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
@media (max-width:720px){.site-footer .wrap{grid-template-columns:1fr;gap:22px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}