/* Observatoire des prix des carburants — feuille de style unique.
   Les couleurs reprennent celles du dashboard Power BI du projet, pour que
   le site et le dashboard se lisent comme un seul travail.

   Deux couleurs ont été ajoutées (SP95, GPLc) et une corrigée : le gris de la
   moyenne nationale est passé de #A9B0AC à #6E7B74, car à 2,21:1 de contraste
   sur blanc le premier était invisible en trait de 2 px. */

:root {
  /* surfaces et encres */
  --fond: #f3f4f1;
  --carte: #ffffff;
  --bord: #e3e6e1;
  --grille: #e9ebe6;
  --encre: #14201d;
  --encre-2: #51605b;
  --encre-3: #78847e;

  /* un carburant, une couleur, partout */
  --gazole: #0e6e5c;
  --e10: #2f6db5;
  --sp98: #c26a1e;
  --e85: #7a5ba6;
  --sp95: #a8336a;
  --gplc: #157c8e;

  /* polarité : moins cher / plus cher / référence. Pas de rouge-vert. */
  --moins-cher: #2f6db5;
  --plus-cher: #c26a1e;
  --reference: #6e7b74;

  --rayon: 10px;
  --rayon-s: 6px;
  --ombre: 0 1px 2px rgba(20, 32, 29, .05), 0 2px 10px rgba(20, 32, 29, .04);
  --ombre-haute: 0 2px 4px rgba(20, 32, 29, .07), 0 10px 28px rgba(20, 32, 29, .09);
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Les surfaces que l'on ne dessine pas portent aussi le design. */
::selection { background: #cfe0f2; color: var(--encre); }
:focus-visible { outline: 2px solid var(--e10); outline-offset: 2px; border-radius: 3px; }
:where(input, textarea) { caret-color: var(--e10); }

* { scrollbar-width: thin; scrollbar-color: #c7cec8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #c7cec8; border-radius: 6px;
  border: 2px solid var(--carte);
}
*::-webkit-scrollbar-thumb:hover { background: #adb6af; }
*::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; text-wrap: balance; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
p { margin: 0; }

a { color: var(--e10); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

svg { display: block; }
.icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- ossature */

.bandeau {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 13px max(16px, 3vw);
  background: rgba(243, 244, 241, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.bandeau__titre { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.bandeau__titre a { color: inherit; text-decoration: none; }
.bandeau__titre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bandeau__date { color: var(--encre-2); font-size: .8125rem; }
.bandeau__date strong { color: var(--encre); font-weight: 600; }

.page { max-width: 1240px; margin: 0 auto; padding: 22px max(16px, 3vw) 56px; }

.pied {
  max-width: 1240px; margin: 0 auto; padding: 0 max(16px, 3vw) 40px;
  color: var(--encre-3); font-size: .8125rem; line-height: 1.6;
}
.pied a { color: var(--encre-2); }

.bloc {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

/* Le titre d'un visuel est le constat ; le sous-titre donne l'unité. */
.bloc__tete { padding: 16px 18px 0; }
.bloc__tete h2 + .legende { margin-top: 3px; }
.legende { color: var(--encre-2); font-size: .8125rem; }

/* ------------------------------------------------------------- formulaires */

.recherche { position: relative; display: flex; align-items: center; }
.recherche .icone {
  position: absolute; left: 13px; width: 19px; height: 19px;
  color: var(--encre-3); pointer-events: none;
}
.champ {
  width: 100%; padding: 12px 14px 12px 40px;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: border-color .15s, box-shadow .2s var(--sortie);
}
.champ::placeholder { color: var(--encre-3); }
.champ:hover { border-color: #d2d7d1; }
.champ:focus { outline: none; border-color: var(--e10); box-shadow: 0 0 0 3px rgba(47, 109, 181, .13); }

/* Sélecteur de carburant : la couleur porte l'identité, le texte la confirme. */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.onglet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px;
  font: inherit; font-size: .875rem; color: var(--encre-2);
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.onglet:hover { color: var(--encre); border-color: #cdd3cd; }
.onglet__pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teinte, var(--encre-3));
}
.onglet[aria-pressed="true"] {
  color: var(--carte); background: var(--teinte, var(--encre));
  border-color: var(--teinte, var(--encre));
  font-weight: 600;
}
.onglet[aria-pressed="true"] .onglet__pastille { background: rgba(255, 255, 255, .85); }
.onglet:disabled { opacity: .4; cursor: not-allowed; }

/* Fenêtres de temps : un groupe segmenté, plus discret que les carburants. */
.segments { display: inline-flex; padding: 2px; background: #eceee9; border-radius: 8px; }
.segment {
  padding: 5px 11px; font: inherit; font-size: .8125rem; color: var(--encre-2);
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  transition: color .15s, background .15s;
}
.segment:hover { color: var(--encre); }
.segment[aria-pressed="true"] {
  color: var(--encre); background: var(--carte); font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 32, 29, .08);
}
/* Au doigt, 30 px de haut se ratent : on élargit la cible sur écran tactile. */
@media (pointer: coarse) {
  .segment { padding: 10px 14px; }
  .onglet { padding: 10px 14px 10px 12px; }
}

.lien-retour {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--encre-2); font-size: .875rem; text-decoration: none;
}
.lien-retour:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.lien-retour .icone { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- étiquettes */

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette {
  padding: 3px 9px; font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  color: var(--encre-2); background: #eef0ec;
  border-radius: 999px; white-space: nowrap;
}
.etiquette--autoroute { color: #8a4a12; background: #f6e9dc; }
.etiquette--moins-cher { color: #22517f; background: #e2ecf7; }
.etiquette--plus-cher { color: #8a4a12; background: #f6e9dc; }

/* --------------------------------------------------------------- états */

.etat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 24px; text-align: center; color: var(--encre-2);
}
.etat h2 { color: var(--encre); }
.etat p { max-width: 46ch; }

.squelette {
  background: linear-gradient(90deg, #eceee9 25%, #f4f5f2 50%, #eceee9 75%);
  background-size: 300% 100%;
  border-radius: var(--rayon-s);
  animation: glisse 1.3s linear infinite;
}
@keyframes glisse { from { background-position: 150% 0; } to { background-position: -150% 0; } }

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