/* Veille tarifaire — feuille de style unique (clair / sombre, mobile d'abord) */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --texte: #0b0b0b;
  --texte-2: #52514e;
  --discret: #898781;
  --trait: #e1e0d9;
  --bord: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --moi: #eb6834;
  --moi-fond: #fdeee7;
  --ok: #006300;
  --alerte: #b25a00;
  --erreur: #d03b3b;
  /* Comparatif : du moins cher (bleu) au plus cher (rouge), gris au milieu */
  --c0: #b7d3f6; --c1: #dbe8f8; --c2: #f0efec; --c3: #f8dcdb; --c4: #f2b8b7;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
    --texte: #f0efec; --texte-2: #c3c2b7; --discret: #898781; --trait: #2c2c2a;
    --bord: rgba(255, 255, 255, 0.10); --accent: #3987e5; --moi: #d95926; --moi-fond: #3a2219;
    --ok: #0ca30c; --alerte: #fab219; --erreur: #e66767;
    --c0: #184f95; --c1: #1f3550; --c2: #383835; --c3: #563030; --c4: #7a3636;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
  --texte: #f0efec; --texte-2: #c3c2b7; --discret: #898781; --trait: #2c2c2a;
  --bord: rgba(255, 255, 255, 0.10); --accent: #3987e5; --moi: #d95926; --moi-fond: #3a2219;
  --ok: #0ca30c; --alerte: #fab219; --erreur: #e66767;
  --c0: #184f95; --c1: #1f3550; --c2: #383835; --c3: #563030; --c4: #7a3636;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.discret, small { color: var(--texte-2); }

/* En-tête et navigation */
header.barre {
  background: var(--surface); border-bottom: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem 16px;
}
header.barre .marque { font-weight: 700; color: var(--texte); text-decoration: none; margin-right: auto; }
header.barre nav { display: flex; flex-wrap: wrap; gap: .1rem .3rem; }
header.barre nav a { padding: .35rem .55rem; border-radius: 6px; text-decoration: none; color: var(--texte-2); }
header.barre nav a.actif, header.barre nav a:hover { background: var(--surface-2); color: var(--texte); }
header.barre form { margin: 0; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }

/* Messages */
.flash { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .6rem; border: 1px solid var(--bord); background: var(--surface); }
.flash.ok { border-left: 4px solid var(--ok); }
.flash.erreur { border-left: 4px solid var(--erreur); }
.flash.info { border-left: 4px solid var(--accent); }

/* Cartes, formulaires */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end; margin-bottom: 14px; }
.filtres > *, .filtres label, .champ { min-width: 0; max-width: 100%; }
.filtres label, .champ { display: flex; flex-direction: column; font-size: .85rem; color: var(--texte-2); gap: .15rem; }
input, select, textarea, button {
  font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--trait);
  border-radius: 6px; padding: .35rem .5rem; max-width: 100%;
}
select { text-overflow: ellipsis; }
textarea { width: 100%; min-height: 4rem; }
button, .bouton {
  cursor: pointer; background: var(--surface-2); border: 1px solid var(--bord); text-decoration: none;
  color: var(--texte); display: inline-block; padding: .4rem .75rem; border-radius: 6px;
}
button.principal, .bouton.principal { background: var(--accent); color: #fff; border-color: transparent; }
button.lien { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }
.segment { display: inline-flex; border: 1px solid var(--trait); border-radius: 7px; overflow: hidden; }
.segment a { padding: .35rem .7rem; text-decoration: none; color: var(--texte-2); }
.segment a.actif { background: var(--accent); color: #fff; }
.grille-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem 1rem; }
.case { flex-direction: row !important; align-items: center; gap: .4rem !important; }

/* Tableaux */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .4rem .55rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
th { font-size: .8rem; color: var(--texte-2); font-weight: 600; background: var(--surface); position: sticky; top: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.moi td { background: var(--moi-fond); }
tr.moi td:first-child, .pastille-moi { box-shadow: inset 4px 0 0 var(--moi); }
tr.separation td { border-top: 2px solid var(--trait); }
.motif { color: var(--discret); font-size: .8rem; white-space: normal; max-width: 12rem; display: inline-block; }
.dispo { color: var(--alerte); font-size: .78rem; display: block; }
.nuit { color: var(--texte-2); font-size: .8rem; display: block; }
td.c0 { background: var(--c0); } td.c1 { background: var(--c1); } td.c2 { background: var(--c2); }
td.c3 { background: var(--c3); } td.c4 { background: var(--c4); }
.legende-couleurs { display: flex; gap: .3rem; align-items: center; font-size: .8rem; color: var(--texte-2); margin: .4rem 0; }
.legende-couleurs span.b { width: 1.4rem; height: .8rem; border-radius: 3px; display: inline-block; }

/* Pastilles de statut (toujours avec un libellé) */
.statut { display: inline-block; padding: .05rem .45rem; border-radius: 99px; font-size: .78rem; border: 1px solid var(--bord); white-space: nowrap; }
.statut::before { content: "● "; }
.statut.ok, .statut.aucune_correspondance { color: var(--ok); }
.statut.partiel, .statut.en_cours { color: var(--alerte); }
.statut.erreur, .statut.interrompu, .statut.bloque { color: var(--erreur); }
.badge { font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.badge.verifier { color: var(--alerte); border: 1px solid var(--alerte); background: none; }

/* Synthèse */
.synthese li { margin: .2rem 0; }
.hausse { color: var(--erreur); } .baisse { color: var(--ok); }
.point { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; margin-right: .3rem; }

/* Graphique */
.graphique { position: relative; height: 340px; }
@media (max-width: 640px) {
  .graphique { height: 280px; }
  main { padding: 12px 16px; }
  th, td { padding: .35rem .4rem; }
  /* Tableaux larges : une ligne par cellule, défilement horizontal dans le cadre */
  .defile th, .defile td { white-space: nowrap; }
  .defile td .motif { white-space: normal; min-width: 7rem; }
  .graphique { height: 320px; }
}