/* Console Quiéla — mobile d'abord. Couleurs de la marque (vitrine), barres validées
   (dataviz : #167A48 sur clair, #2EA866 sur sombre), statuts toujours avec icône + texte. */
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: light;
  --fond: #F6F7F2;
  --carte: #FFFFFF;
  --encre: #15221C;
  --encre-2: #55625B;
  --discret: #7A857F;
  --trait: #DDE2D8;
  --grille: #E6E9E2;
  --axe: #C3C9BE;
  --accent: #167A48;
  --accent-encre: #FFFFFF;
  --accent-doux: #E3F1E8;
  --barre: #167A48;
  --barre-survol: #1E9459;
  --bon: #0B7A0B;
  --bon-fond: #E4F4E4;
  --alerte: #8A5A00;
  --alerte-fond: #FDF1D6;
  --critique: #B42323;
  --critique-fond: #FBE5E5;
  --ombre: 0 1px 2px rgba(21, 34, 28, .06), 0 2px 8px rgba(21, 34, 28, .05);
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --fond: #0F1613;
    --carte: #17201B;
    --encre: #E8EEE9;
    --encre-2: #A9B5AE;
    --discret: #84918A;
    --trait: #2A3730;
    --grille: #24302A;
    --axe: #3A4840;
    --accent: #3DBE7A;
    --accent-encre: #0F1613;
    --accent-doux: #1C3326;
    --barre: #2EA866;
    --barre-survol: #3DBE7A;
    --bon: #3DCB3D;
    --bon-fond: #173019;
    --alerte: #F5B935;
    --alerte-fond: #33290F;
    --critique: #F07373;
    --critique-fond: #3A1A1A;
    --ombre: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0F1613; --carte: #17201B; --encre: #E8EEE9; --encre-2: #A9B5AE; --discret: #84918A;
  --trait: #2A3730; --grille: #24302A; --axe: #3A4840; --accent: #3DBE7A; --accent-encre: #0F1613;
  --accent-doux: #1C3326; --barre: #2EA866; --barre-survol: #3DBE7A; --bon: #3DCB3D; --bon-fond: #173019;
  --alerte: #F5B935; --alerte-fond: #33290F; --critique: #F07373; --critique-fond: #3A1A1A; --ombre: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font: 700 26px/1.15 "Bricolage Grotesque", "Figtree", system-ui, sans-serif; letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── En-tête et navigation ─────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; font-weight: 700; margin-right: auto; }
.marque small { color: var(--discret); font-weight: 500; }
.marque img { border-radius: 7px; }
.onglets { display: none; gap: 4px; }
.onglets a, .deconnexion {
  padding: 8px 12px; border-radius: 999px; color: var(--encre-2); text-decoration: none; font-weight: 600; font-size: 15px;
}
.onglets a[aria-current="page"] { background: var(--accent-doux); color: var(--encre); }
.deconnexion { background: none; border: 1px solid var(--trait); cursor: pointer; min-height: 40px; }
.barre-bas {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--carte); border-top: 1px solid var(--trait);
}
.barre-bas a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center;
  color: var(--discret); text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 12px;
}
.barre-bas a span { font-size: 20px; line-height: 1; }
.barre-bas a[aria-current="page"] { color: var(--accent); background: var(--accent-doux); }
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .barre-bas { display: none !important; }
  .onglets:not([hidden]) { display: flex; }
}

/* ── Mise en page ─────────────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: 16px; outline: none; }
.chargement, .vide { color: var(--discret); text-align: center; padding: 48px 0; }
.titre-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 4px 0 16px; }
.titre-page p { margin: 0; color: var(--discret); font-size: 14px; }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--encre-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.section { margin: 24px 0 0; }
.section > h2 { margin: 0 0 10px; }
.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px;
}
.grille-cartes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } }

/* ── Chiffres (cartes de chiffres) ─────────────────────────────────────── */
.chiffres { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.chiffre .libelle { color: var(--encre-2); font-size: 13px; font-weight: 600; }
.chiffre .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.chiffre .detail { color: var(--discret); font-size: 13px; margin-top: 2px; }
.chiffre.vedette .valeur { font-size: 34px; }
.chiffres.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 639px) { .chiffres.trois .chiffre { padding: 10px; } .chiffres.trois .libelle { font-size: 12px; } }

/* ── Statut (toujours icône + texte) ───────────────────────────────────── */
.statut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.statut::before { font-size: 12px; }
.statut.bon { background: var(--bon-fond); color: var(--bon); }
.statut.bon::before { content: "●"; }
.statut.alerte { background: var(--alerte-fond); color: var(--alerte); }
.statut.alerte::before { content: "▲"; }
.statut.critique { background: var(--critique-fond); color: var(--critique); }
.statut.critique::before { content: "✕"; }
.statut.neutre { background: var(--accent-doux); color: var(--encre-2); }

/* ── Carte d'asso (tableau) ────────────────────────────────────────────── */
a.asso { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
a.asso:hover { border-color: var(--axe); }
.asso-tete { display: flex; align-items: flex-start; gap: 10px; }
.asso-tete .logo { font-size: 26px; line-height: 1; width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent-doux); border-radius: 10px; flex: none; }
.asso-tete .noms { min-width: 0; flex: 1; }
.asso-tete .noms h2 { overflow-wrap: anywhere; }
.asso-tete .noms p { margin: 2px 0 0; color: var(--discret); font-size: 13px; overflow-wrap: anywhere; }
.asso-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.asso-ligne .gros { font-size: 22px; font-weight: 700; }
.asso-ligne .petit { color: var(--encre-2); }
.reperes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Jauge (palier, mémoire, disque) ───────────────────────────────────── */
.jauge { height: 8px; border-radius: 999px; background: var(--accent-doux); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.jauge.alerte > span { background: #fab219; }
.jauge.critique > span { background: #d03b3b; }
.jauge-legende { display: flex; justify-content: space-between; color: var(--discret); font-size: 12px; margin-top: 4px; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions form { display: contents; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre); font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
@media (max-width: 639px) { .actions .bouton { flex: 1 1 100%; } }

/* ── Graphique en colonnes ─────────────────────────────────────────────── */
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille line { stroke: var(--grille); stroke-width: 1; }
.graphique .axe { stroke: var(--axe); stroke-width: 1; }
.graphique text { fill: var(--discret); font-size: 11px; font-family: inherit; }
.graphique text.etiquette { fill: var(--encre-2); font-weight: 700; }
.graphique .barre { fill: var(--barre); }
/* la zone de survol (.cible) couvre toute la colonne : la barre et les textes dessinés par-dessus la laissent passer */
.graphique .barre, .graphique text { pointer-events: none; }
.graphique .barre.archives { fill: var(--axe); }
.graphique .cible { fill: transparent; cursor: pointer; outline: none; }
.graphique .cible:hover + .barre, .graphique .cible:focus-visible + .barre { fill: var(--barre-survol); }
.graphique .cible:focus-visible { stroke: var(--accent); stroke-width: 2; }
.graphique-legende { display: flex; flex-wrap: wrap; gap: 12px; color: var(--encre-2); font-size: 13px; margin-top: 8px; }
.graphique-legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--barre); }
.graphique-legende span.archives::before { background: var(--axe); }
details.chiffres-bruts { margin-top: 10px; font-size: 14px; }
details.chiffres-bruts summary { cursor: pointer; color: var(--encre-2); font-weight: 600; min-height: 32px; }
.infobulle {
  position: fixed; z-index: 20; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  background: var(--encre); color: var(--fond); padding: 6px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap;
}
.infobulle strong { display: block; font-size: 16px; }

/* ── Listes et tableaux ───────────────────────────────────────────────── */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--trait); min-height: 48px; }
.liste li:first-child { border-top: 0; }
.liste .principal { flex: 1; min-width: 0; }
.liste .principal small { display: block; color: var(--discret); font-size: 13px; }
.liste .droite { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th, .tableau td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--trait); }
.tableau th { color: var(--encre-2); font-weight: 600; border-top: 0; }
.tableau td.n, .tableau th.n { text-align: right; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.note { color: var(--discret); font-size: 13px; margin: 8px 0 0; }
.deux-colonnes { display: grid; gap: 12px; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ── Connexion ─────────────────────────────────────────────────────────── */
.connexion { max-width: 380px; margin: 8vh auto 0; }
.connexion h1 { margin-bottom: 4px; }
.connexion p.sous-titre { color: var(--discret); margin: 0 0 20px; }
.champ { display: block; margin-bottom: 14px; }
.champ span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--axe);
  background: var(--carte); font-size: 17px;
}
.champ input.code { letter-spacing: .35em; font-variant-numeric: tabular-nums; font-size: 22px; text-align: center; }
.erreur { color: var(--critique); background: var(--critique-fond); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
.connexion .bouton { width: 100%; }