/* Palette validee par validate_palette.js dans les deux modes. Les series du
   graphique sont peintes via ces variables, jamais en dur dans le SVG. */

:root {
  color-scheme: light;
  --plan:        #f9f9f7;
  --surface:     #fcfcfb;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --ink-muet:    #898781;
  --grille:      #e1e0d9;
  --base:        #c3c2b7;
  --bord:        rgba(11, 11, 11, .10);
  --serie-1:     #2a78d6;
  --serie-2:     #eb6834;
  --hausse:      #006300;
  --baisse:      #d03b3b;
  --lien:        #1c5cab;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plan:      #0d0d0d;
    --surface:   #1a1a19;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --ink-muet:  #898781;
    --grille:    #2c2c2a;
    --base:      #383835;
    --bord:      rgba(255, 255, 255, .10);
    --serie-1:   #3987e5;
    --serie-2:   #d95926;
    --hausse:    #0ca30c;
    --baisse:    #e66767;
    --lien:      #6da7ec;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plan);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

a { color: var(--lien); }
a:hover { text-decoration: none; }

/* ------------------------------------------------------------ structure */

.bandeau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem;
}
.marque {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -.02em;
}
.marque span { color: var(--serie-1); }
.bandeau nav { display: flex; gap: 1rem; }
.bandeau nav a { font-size: .9rem; }

.fil {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-size: .85rem;
  color: var(--ink-muet);
}
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.fil li + li::before { content: "›"; margin-right: .4rem; color: var(--ink-muet); }

h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 1rem 0 .75rem;
}
h2 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .75rem;
}
section h2:first-child { margin-top: 0; }

.chapo { font-size: 1.05rem; color: var(--ink-2); max-width: 46rem; }
.note { font-size: .85rem; color: var(--ink-muet); }
.discret { color: var(--ink-muet); }

/* --------------------------------------------------------- tuiles de tete */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.tuile {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.tuile h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
             color: var(--ink-muet); margin: 0 0 .35rem; }
.valeur { font-size: 2rem; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.valeur .unite { font-size: 1rem; font-weight: 400; color: var(--ink-muet); }
.delta { font-size: .9rem; color: var(--ink-2); margin: .1rem 0 0; }
.hausse { color: var(--hausse); font-weight: 600; }
.baisse { color: var(--baisse); font-weight: 600; }

.detail { margin: .9rem 0 0; font-size: .85rem; display: grid;
          grid-template-columns: 1fr auto; gap: .25rem .75rem; }
.detail dt { color: var(--ink-muet); }
.detail dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- figure */

.figure {
  margin: 0 0 1.5rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1rem;
  overflow-x: auto;
}
.figure figcaption { font-size: .8rem; color: var(--ink-muet); margin-top: .5rem; }

.graphe { width: 100%; height: auto; display: block; min-width: 20rem; }
.graphe .grille  { stroke: var(--grille); stroke-width: 1; }
.graphe .tick    { fill: var(--ink-muet); font-size: 11px;
                   font-variant-numeric: tabular-nums; }
.graphe .trait   { fill: none; stroke-width: 2; stroke-linecap: round;
                   stroke-linejoin: round; }
/* Anneau a la couleur de la surface : deux points superposes restent lisibles. */
.graphe .point   { stroke: var(--surface); stroke-width: 2; }
.graphe .etiquette { font-size: 12px; font-weight: 600; }

.graphe .serie-1 { stroke: var(--serie-1); }
.graphe .serie-1.point { fill: var(--serie-1); }
.graphe .serie-1.etiquette { fill: var(--serie-1); stroke: none; }
.graphe .serie-2 { stroke: var(--serie-2); }
.graphe .serie-2.point { fill: var(--serie-2); }
.graphe .serie-2.etiquette { fill: var(--serie-2); stroke: none; }

/* --------------------------------------------------------------- tableaux */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
}
.tableau caption { caption-side: top; text-align: left; font-size: .85rem;
                   color: var(--ink-muet); padding-bottom: .5rem; }
.tableau th, .tableau td { padding: .55rem .75rem; text-align: right;
                           border-bottom: 1px solid var(--grille); }
.tableau thead th { font-size: .75rem; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--ink-muet);
                    font-weight: 600; border-bottom: 1px solid var(--base); }
.tableau th:first-child, .tableau td:first-child,
.tableau thead th:first-child { text-align: left; }
.tableau tbody th { font-weight: 500; }
.tableau td { font-variant-numeric: tabular-nums; }
.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- tri des tableaux */
/* .triable n'est pose par le script qu'une fois les boutons installes :
   sans JavaScript, aucune affordance de clic n'apparait. */

.triable thead th { padding: 0; }
.triable thead th .tri {
  width: 100%;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: .55rem .75rem;
  text-align: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
  justify-content: flex-end;
}
.triable thead th:first-child .tri { justify-content: flex-start; }
.triable thead th .tri:hover { color: var(--ink); }
.triable thead th .tri:focus-visible { outline: 2px solid var(--serie-1);
                                       outline-offset: -2px; }

/* Fleche d'etat : absente tant que la colonne n'est pas celle du tri. */
.triable thead th .tri::after {
  content: "↕";
  font-size: .8em;
  opacity: .35;
}
.triable thead th[aria-sort="ascending"]  .tri::after { content: "↑"; opacity: 1; }
.triable thead th[aria-sort="descending"] .tri::after { content: "↓"; opacity: 1; }
.triable thead th[aria-sort] .tri { color: var(--ink); }

/* Un tableau large defile dans son propre cadre ; la page ne defile jamais
   horizontalement. Le padding-bottom evite que le titre de la section
   suivante ne vienne coller au bas du tableau. */
section:has(> .tableau) { overflow-x: auto; padding-bottom: .75rem; }
section { margin-bottom: 1.25rem; }

/* ----------------------------------------------------------------- listes */

.voisines, .liens { list-style: none; padding: 0; display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
                    gap: .5rem; }
.voisines li, .liens li {
  display: flex; justify-content: space-between; gap: .5rem;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 8px; padding: .5rem .75rem; font-size: .9rem;
}

/* ------------------------------------------------------------------- pied */

.pied {
  max-width: 60rem; margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--grille);
  font-size: .8rem; color: var(--ink-muet);
}
.pied .source { color: var(--ink-2); }

@media (max-width: 30rem) {
  .tableau { font-size: .82rem; }
  .tableau th, .tableau td { padding: .45rem .5rem; }
}