/* Valeur Hérault : variables du système visuel (proposition 2 « Tableau de bord »).
   Toute valeur de couleur, de taille, de rayon ou d'espacement de l'interface vient d'ici.
   Contrastes WCAG calculés sur blanc (#fff) et sur --surface (#f2f5f5). */
:root{
  /* Fonds */
  --paper:#ffffff;          /* cartes, en-tête, champs */
  --surface:#f2f5f5;        /* fond des pages intérieures, bandeau d'accueil, pied de page */
  --rule:#dbe3e3;           /* filets et bordures de cartes (décoratif) */

  /* Texte */
  --ink:#172126;            /* 16,4:1 sur blanc, 14,9:1 sur surface */
  --ink-2:#3b4a50;          /* 9,2:1 */
  --muted:#56646a;          /* 6,1:1 sur blanc, 5,6:1 sur surface */

  /* Marque (logo) */
  --accent:#0e6b75;         /* bleu lagune du logo, 6,2:1 : liens, bouton principal, série principale */
  --accent-strong:#0a535b;  /* survol, anneau de focus (8,8:1) */
  --accent-soft:#e3f0f0;    /* ligne sélectionnée, suggestion active */
  --sun:#e9b949;            /* or du logo : repère « prix demandé » (toujours cerclé d'encre), jamais du texte */

  /* États : toujours icône ou mot + couleur, jamais la couleur seule */
  --good:#1a7a45;  --good-soft:#e8f4ec;   /* 4,8:1 sur son fond */
  --warn:#955800;  --warn-soft:#fbf1e0;   /* 5,1:1 */
  --bad:#b3261e;   --bad-soft:#fcebea;    /* 5,7:1 */

  /* Contrôles : bordure à 3:1 minimum (WCAG 1.4.11). Les maquettes utilisaient #aeb8c2 (2,0:1). */
  --ctl-border:#7f8b96;     /* 3,5:1 sur blanc */
  --placeholder:#6c7783;    /* 4,6:1 */

  /* Graphiques et cartes */
  --series-ref:#7c878b;     /* courbe « Hérault » : 3,7:1 (les maquettes : #8f989b, 2,9:1) */
  --band:#9fc7c9;           /* bande de la moitié centrale, barres de classement */
  --ramp-1:#dcecec; --ramp-2:#a8d0d1; --ramp-3:#6fb0b3; --ramp-4:#33878d; --ramp-5:#0b555c;
  --nodata:#ffffff;         /* + hachures (voir .nodata-hatch) : l'aplat #eef1f1 des maquettes se confondait avec --ramp-1 (1,07:1) */
  --nodata-hatch:#c3cdcd;
  /* Roles des graphiques des outils (brief 6.4) : une couleur par role, la meme
     d'un graphique a l'autre (le PTZ a partout la meme couleur). Nuances de la
     rampe, du plus fonce (pret principal) au plus clair (assurance). */
  --role-principal:#0b555c; --role-ptz:#33878d; --role-eco:#6fb0b3; --role-autre:#a8d0d1;
  --role-assurance:#c3cdcd;

  /* Typographie : 8 tailles, aucune autre */
  --f:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Newsreader",Georgia,serif;   /* mot-symbole du logo uniquement */
  --fs-12:12px;   /* étiquettes mono en capitales, graduations, mentions légales */
  --fs-14:14px;   /* texte secondaire, notes, légendes, étiquettes, pastilles, listes de classement */
  --fs-16:16px;   /* texte courant, navigation, champs, cellules de tableau */
  --fs-18:18px;   /* titres de cartes, h3 */
  --fs-24:24px;   /* valeurs des tuiles et indicateurs, h2 mobile, mot-symbole */
  --fs-32:32px;   /* h2, h1 mobile */
  --fs-40:40px;   /* h1, chiffre vedette mobile */
  --fs-56:56px;   /* chiffre vedette (prix médian, valeur de marché) */

  /* Formes et mise en page */
  --r-ctl:6px;  --r-card:12px;  --r-pill:999px;
  --wrap:1120px; --gut:24px;     /* 16px sous 640px */
  --gap:16px;                    /* 10px entre tuiles sous 700px */
  --target:44px;                 /* hauteur minimale de toute cible isolée */
  --header-h:64px;
}
@media (max-width:640px){:root{--gut:16px}}

:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}

/* Communes sans référence sur la carte : hachures, pas un aplat voisin de la première classe */
/* <pattern id="nodata" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
     <rect width="4" height="4" fill="#fff"/><line x1="0" y1="0" x2="0" y2="4" stroke="#c3cdcd" stroke-width="1.2"/></pattern> */