/* ==========================================================
   FM3A — Interface publique
   Mobile-first. Les cases colorées sont le héros visuel.
   Palette dérivée du logo : vert olive, vert clair, jaune
   doré, terre, crème.
   ========================================================== */

:root {
  /* Charte FM3A */
  --bg:           #FAF7EE;
  --bg-card:      #FFFFFF;
  --ink:          #2C3018;
  --ink-soft:     #5B5F47;
  --ink-mute:     #8A8C7A;
  --line:         #E6E1CF;
  --line-soft:    #F0EBDB;

  --brand:        #6B8E4E;   /* vert olive du logo  */
  --brand-deep:   #4F6E37;
  --brand-soft:   #A8C57E;   /* vert clair          */
  --sun:          #F1C84B;   /* jaune doré du soleil */
  --earth:        #8B5A2B;   /* terre / racines     */

  /* Echelle de couleurs des cases (du moins au plus performant) */
  --c1: #7A1F1F;             /* 0-15  rouge sombre  */
  --c2: #C0392B;             /* 16-25 rouge         */
  --c3: #D87A1E;             /* 26-45 orange sombre */
  --c4: #C9A227;             /* 46-55 jaune sombre  */
  --c5: #F1D86A;             /* 56-65 jaune clair   */
  --c6: #9BCB7A;             /* 66-75 vert clair    */
  --c7: #4E9A4A;             /* 76-90 vert          */
  --c8: #2C8A8A;             /* 91-100 vert-bleu    */

  /* Texte porté par les cases colorées (contraste auto) */
  --on-dark:  #FFFFFF;
  --on-light: #1F2410;

  /* Echelle typo — pilotable par le zoom utilisateur */
  --scale: 1;
  --fs-base:   calc(13px * var(--scale));
  --fs-cell:   calc(10px * var(--scale));
  --fs-name:   calc(13px * var(--scale));
  --fs-meta:   calc(10.5px * var(--scale));
  --fs-title:  calc(15px * var(--scale));

  --radius: 10px;
  --radius-sm: 6px;
  --shadow:  0 1px 2px rgba(40, 50, 20, 0.05),
             0 4px 12px rgba(40, 50, 20, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-deep); }

/* ----------- Layout général ----------------------------- */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px 80px;
}

/* ----------- En-tête ------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(250,247,238,0.96) 95%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--line-soft);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__logo {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  overflow: hidden;
}
.topbar__logo img { width: 100%; height: 100%; object-fit: cover; }

.topbar__title {
  flex: 1;
  min-width: 0;
}
.topbar__brand {
  font-weight: 800;
  font-size: var(--fs-title);
  letter-spacing: 0.5px;
  color: var(--brand-deep);
  line-height: 1.1;
}
.topbar__sub {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  line-height: 1.2;
}

.topbar__zoom {
  display: flex; gap: 4px;
}
.zoom-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.zoom-btn:active { background: var(--line-soft); }

/* ----------- Contrôles ---------------------------------- */
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.controls__row {
  grid-column: 1 / -1;
  display: flex; gap: 8px; align-items: center;
}
.select, .input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-meta);
  font-family: inherit;
  color: var(--ink);
}
.select:focus, .input:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: -1px;
}
.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.label-row__label {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.btn-reset {
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-reset:hover { background: var(--line-soft); }

/* ----------- Légende compactée -------------------------- */
.legend {
  margin: 10px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: var(--shadow);
}
.legend__title {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.legend__chevron {
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform .2s;
}
.legend.collapsed .legend__chevron { transform: rotate(-90deg); }
.legend.collapsed .legend__scale,
.legend.collapsed .legend__meta { display: none; }

.legend__scale {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
}
.legend__chip {
  height: 18px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  display: grid; place-items: center;
  color: var(--on-dark);
  text-align: center;
  line-height: 1;
  padding: 0 2px;
  letter-spacing: 0;
}
.legend__chip--na {
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--line) 3px, var(--line) 6px);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
.legend__chip--na, .legend__chip[data-light="1"] { color: var(--on-light); }

.legend__meta {
  font-size: 9.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.3;
}

/* ----------- Liste des associations --------------------- */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assoc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 10px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name   total"
    "meta   total"
    "cells  cells";
  gap: 6px 10px;
}
.assoc__name {
  grid-area: name;
  font-size: var(--fs-name);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  word-break: break-word;
}
.assoc__meta {
  grid-area: meta;
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  line-height: 1.2;
}
.assoc__meta b { font-weight: 600; color: var(--ink-soft); }

.assoc__total {
  grid-area: total;
  align-self: start;
  min-width: 56px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  text-align: center;
  padding: 0 6px;
}
.assoc__total small {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  opacity: .85;
  letter-spacing: 1px;
  margin-bottom: 1px;
}

.assoc__cells {
  grid-area: cells;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 2px;
}

.cell {
  height: 38px;
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  text-align: center;
  padding: 3px 2px;
  font-size: var(--fs-cell);
  line-height: 1.05;
  font-weight: 700;
}
.cell__label {
  font-size: 8.5px;
  font-weight: 700;
  opacity: .9;
  letter-spacing: .2px;
  margin-bottom: 1px;
}
.cell__val {
  font-size: var(--fs-cell);
  font-weight: 800;
}

/* Échelle des couleurs */
.cell--c1, .assoc__total[data-c="1"] { background: var(--c1); color: var(--on-dark); }
.cell--c2, .assoc__total[data-c="2"] { background: var(--c2); color: var(--on-dark); }
.cell--c3, .assoc__total[data-c="3"] { background: var(--c3); color: var(--on-dark); }
.cell--c4, .assoc__total[data-c="4"] { background: var(--c4); color: var(--on-light); }
.cell--c5, .assoc__total[data-c="5"] { background: var(--c5); color: var(--on-light); }
.cell--c6, .assoc__total[data-c="6"] { background: var(--c6); color: var(--on-light); }
.cell--c7, .assoc__total[data-c="7"] { background: var(--c7); color: var(--on-dark); }
.cell--c8, .assoc__total[data-c="8"] { background: var(--c8); color: var(--on-dark); }
.cell--na, .assoc__total[data-c="0"] {
  background:
    repeating-linear-gradient(45deg, #ffffff, #ffffff 4px, var(--line-soft) 4px, var(--line-soft) 7px);
  color: var(--ink-mute);
  border: 1px dashed var(--line);
}

/* ----------- État vide / chargement --------------------- */
.empty {
  text-align: center;
  color: var(--ink-mute);
  padding: 32px 12px;
  font-size: var(--fs-base);
}
.empty__icon {
  font-size: 28px;
  margin-bottom: 6px;
  opacity: .5;
}

/* ----------- Pied de page ------------------------------- */
.footer {
  margin-top: 16px;
  padding: 12px 0 8px;
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--ink-mute);
}
.footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}

/* ----------- Bouton ouvrir détails ---------------------- */
.assoc.is-open { background: var(--line-soft); }
.assoc__details {
  display: none;
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.assoc.is-open .assoc__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.assoc__details div { line-height: 1.3; }

/* ----------- Tap-fb visuel ------------------------------ */
.assoc { transition: background .15s, transform .1s; cursor: pointer; }
.assoc:active { transform: scale(0.998); }

/* ----------- Très petit écran --------------------------- */
@media (max-width: 360px) {
  .controls { grid-template-columns: 1fr; }
  .assoc__total { min-width: 50px; height: 40px; font-size: 12px; }
}

/* ----------- Écran moyen — densité confortable ---------- */
@media (min-width: 600px) {
  .page { padding: 0 16px 80px; }
  .cell { height: 42px; }
}