/* ==========================================================================
   Charte graphique commune « SA Expertises »  —  charte_sa.css  (v1, 13/10/2026)

   Source UNIQUE des couleurs, polices et composants de base partagés par :
     - la WebUI / Cockpit du PC (webui/, servie sous /charte/) ;
     - la PWA « Terrain SA » de l'iPhone (serveur_terrain/pwa/, copie
       synchronisée par outils/synchroniser_charte.py — cf. CHARTE_SA.md).

   Règles (docs/design/CHARTE_SA.md) :
     - une seule couleur d'action : le bleu du cabinet (#0B3D91) ;
     - vert = fait / payé / sans amiante, orange = en attente,
       rouge = alerte / impayé / amiante ;
     - contraste ≥ 4,5:1 sur tout texte, ≥ 7:1 sur les boutons d'action
       (ratios mesurés : outils/contraste_charte.py, vérifiés par
       test_charte_sa.py) ;
     - verre dépoli SEULEMENT sur les barres (jamais sous un texte long),
       voile ≥ 92 %, opaque si l'utilisateur réduit la transparence ;
     - cibles ≥ 44 px dès que l'écran est tactile (.sa-tactile ou
       pointer: coarse) ; le PC garde sa densité.
   Polices servies en local (polices/, licence OFL) : rien ne dépend
   d'Internet, la PWA tourne hors ligne.
   ========================================================================== */

/* ---------- Polices (fichiers locaux, sous-ensemble latin : é è à ç œ €) -- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("polices/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("polices/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("polices/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("polices/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("polices/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---------- Jetons : thème CLAIR (défaut) ---------------------------------- */
:root {
  color-scheme: light;

  /* Fonds et surfaces */
  --fond: #f1f4f7;            /* fond de l'application */
  --surface: #ffffff;         /* cartes, barres, menus */
  --surface-2: #fafbfc;       /* entêtes de table, survol de ligne */
  --champ: #f6f8fa;           /* champs de saisie */
  --barre-laterale: #ffffff;
  --trait: #dde1e6;           /* bordures des cartes */
  --trait-doux: #eef1f4;      /* séparateurs de lignes, pistes de barres */
  --trait-champ: #737c89;     /* bord d'un champ ou d'une case (≥ 3:1) */

  /* Textes */
  --texte: #14181f;           /* principal */
  --texte-2: #4a5361;         /* secondaire, étiquettes */
  --texte-3: #5f6876;         /* tertiaire, entêtes de table (≥ 4,5:1 partout) */

  /* Accent = bleu du cabinet */
  --accent: #0b3d91;          /* FOND des boutons principaux (texte blanc) */
  --accent-texte: #0b3d91;    /* liens, texte des boutons teintés, élément actif */
  --accent-doux: #e3ecfa;     /* fond teinté (bouton secondaire teinté, nav active, chip) */
  --vert-vif: #2f8f6b;        /* point « connecté » (décor, jamais du texte) */
  --accent-vif: #2f6bd6;      /* bleu du prototype : surfaces décoratives seulement
                                 (barre du mois courant, anneau de focus) */
  --sur-accent: #ffffff;      /* texte posé sur --accent, --vert, --rouge */

  /* Bandeau d'état */
  --bandeau: #eaf1fb;
  --bandeau-trait: #d5e2f4;

  /* Couleurs sémantiques : plein (fond, texte blanc) / texte / doux (fond teinté) */
  --vert: #08602a;   --vert-texte: #0a5a26;   --vert-doux: #ddf3e4;
  --orange: #8a4b00; --orange-texte: #6b3a00; --orange-doux: #ffe7c2;
  --ambre: #d9a63a;  --ambre-texte: #5c4600;  --ambre-doux: #fbf1d6;
  --rouge: #b00020;  --rouge-texte: #8e0019;  --rouge-doux: #fde3e6;
  --rouge-teinte: #fdf5f4;    /* fond d'une tuile KPI en alerte */
  --rouge-trait: #f0d4d0;
  --gris-doux: #e6e9ee;       /* chip neutre (texte : --texte-2) */

  /* Graphes */
  --graphe: #c4d3ec;          /* barres des mois passés */
  --graphe-0: #dbe1e8;        /* barre ~ zéro */

  /* Verre (barres seulement), voile, ombre, logo */
  --verre: rgba(249, 250, 252, 0.94);
  --voile: rgba(10, 14, 20, 0.45);  /* derrière un menu ouvert */
  --ombre: 0 1px 2px rgba(20, 26, 36, 0.06);
  --logo-filtre: none;

  /* Typographie */
  --police: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;
  --taille-texte: 14px;       /* PC ; 17 px en .sa-tactile */
  --taille-table: 13px;
  --taille-petite: 12px;

  /* Formes et cotes */
  --rayon-bouton: 9px;
  --rayon-carte: 12px;
  --rayon-chip: 6px;
  --hauteur-bouton: 38px;     /* PC ; 52 px en .sa-tactile */
  --cible-min: 44px;          /* plus petite cible tactile admise */
}

/* ---------- Jetons : thème SOMBRE -------------------------------------------
   Deux déclencheurs, mêmes valeurs : data-theme="dark" posé par l'utilisateur,
   ou le réglage du système quand aucun data-theme n'est posé.               */
[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0e1219; --surface: #161c25; --surface-2: #1b2029; --champ: #1b2029;
  --barre-laterale: #12161d; --trait: #28303c; --trait-doux: #222a34; --trait-champ: #76818f;
  --texte: #e7ecf2; --texte-2: #b4bfcc; --texte-3: #9aa6b4;
  --accent: #1a4fae; --accent-texte: #8ab8ff; --accent-doux: #17253d; --accent-vif: #5090f2; --vert-vif: #41b489;
  --sur-accent: #ffffff;
  --bandeau: #111f36; --bandeau-trait: #20365a;
  --vert: #08602a;   --vert-texte: #7ee2a0;   --vert-doux: #12301d;
  --orange: #8a4b00; --orange-texte: #ffc66b; --orange-doux: #3a2a10;
  --ambre: #e0bb5b;  --ambre-texte: #e0bb5b;  --ambre-doux: #2a2410;
  --rouge: #b00020;  --rouge-texte: #ff9aa5;  --rouge-doux: #3a1418;
  --rouge-teinte: #1b1310; --rouge-trait: #3a1f1c;
  --gris-doux: #2a313c;
  --graphe: #31456a; --graphe-0: #232b36;
  --verre: rgba(22, 28, 37, 0.92);
  --voile: rgba(0, 0, 0, 0.55);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.35);
  --logo-filtre: invert(1) brightness(1.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --fond: #0e1219; --surface: #161c25; --surface-2: #1b2029; --champ: #1b2029;
    --barre-laterale: #12161d; --trait: #28303c; --trait-doux: #222a34; --trait-champ: #76818f;
    --texte: #e7ecf2; --texte-2: #b4bfcc; --texte-3: #9aa6b4;
    --accent: #1a4fae; --accent-texte: #8ab8ff; --accent-doux: #17253d; --accent-vif: #5090f2; --vert-vif: #41b489;
    --sur-accent: #ffffff;
    --bandeau: #111f36; --bandeau-trait: #20365a;
    --vert: #08602a;   --vert-texte: #7ee2a0;   --vert-doux: #12301d;
    --orange: #8a4b00; --orange-texte: #ffc66b; --orange-doux: #3a2a10;
    --ambre: #e0bb5b;  --ambre-texte: #e0bb5b;  --ambre-doux: #2a2410;
    --rouge: #b00020;  --rouge-texte: #ff9aa5;  --rouge-doux: #3a1418;
    --rouge-teinte: #1b1310; --rouge-trait: #3a1f1c;
    --gris-doux: #2a313c;
    --graphe: #31456a; --graphe-0: #232b36;
    --verre: rgba(22, 28, 37, 0.92);
    --voile: rgba(0, 0, 0, 0.55);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.35);
    --logo-filtre: invert(1) brightness(1.7);
  }
}

/* ---------- Contexte tactile : cibles ≥ 44 px, texte 17 px -----------------
   La PWA pose .sa-tactile sur <body> ; sur le PC, un écran tactile seul
   (pointer: coarse) grossit seulement les cibles.                          */
.sa-tactile {
  --taille-texte: 17px;
  --taille-table: 16px;
  --taille-petite: 14px;
  --hauteur-bouton: 52px;
  --rayon-bouton: 14px;
  --rayon-carte: 16px;
}
@media (pointer: coarse) {
  :root { --hauteur-bouton: 44px; }
}

/* ---------- Socle ------------------------------------------------------------ */
.sa-mono, .sa-num { font-family: var(--police-mono); font-variant-numeric: tabular-nums; }
.sa-discret { color: var(--texte-3); }
.sa-lien { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 2px; }
.sa-focus:focus-visible, .sa-bouton:focus-visible, .sa-chip:focus-visible {
  outline: 2px solid var(--accent-vif); outline-offset: 2px;
}

/* ---------- Boutons ---------------------------------------------------------- */
.sa-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--hauteur-bouton); padding: 0 14px;
  border-radius: var(--rayon-bouton); border: 1px solid var(--trait);
  background: var(--surface); color: var(--texte);
  font: 600 var(--taille-texte)/1.2 var(--police);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sa-bouton:hover { background: var(--surface-2); }
.sa-bouton:active { filter: brightness(0.94); }
.sa-bouton[disabled], .sa-bouton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sa-bouton svg { width: 16px; height: 16px; flex: none; }
.sa-bouton--principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.sa-bouton--principal:hover { background: var(--accent); filter: brightness(1.12); }
.sa-bouton--teinte { background: var(--accent-doux); border-color: transparent; color: var(--accent-texte); }
.sa-bouton--danger { background: var(--rouge-doux); border-color: transparent; color: var(--rouge-texte); }
.sa-bouton--icone { width: var(--hauteur-bouton); padding: 0; }
.sa-tactile .sa-bouton, .sa-bouton--tactile { min-height: max(var(--hauteur-bouton), var(--cible-min)); }

/* ---------- Chips de statut ------------------------------------------------- */
.sa-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--rayon-chip);
  font: 600 var(--taille-petite)/1.5 var(--police); white-space: nowrap;
  background: var(--gris-doux); color: var(--texte-2);
}
.sa-chip--accent { background: var(--accent-doux); color: var(--accent-texte); }
.sa-chip--vert   { background: var(--vert-doux);   color: var(--vert-texte); }
.sa-chip--orange { background: var(--orange-doux); color: var(--orange-texte); }
.sa-chip--ambre  { background: var(--ambre-doux);  color: var(--ambre-texte); }
.sa-chip--rouge  { background: var(--rouge-doux);  color: var(--rouge-texte); }
.sa-chip--plein-rouge { background: var(--rouge); color: var(--sur-accent); }
.sa-chip--plein-vert  { background: var(--vert);  color: var(--sur-accent); }
.sa-chip--type { font-family: var(--police-mono); min-width: 22px; justify-content: center; }

/* ---------- Carte ------------------------------------------------------------ */
.sa-carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre);
  padding: 16px 18px; min-width: 0;
}
.sa-carte__entete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sa-carte__titre { margin: 0; font: 600 15px/1.3 var(--police); color: var(--texte); }
.sa-carte__sous-titre { font-size: var(--taille-petite); color: var(--texte-3); }

/* ---------- Tuile KPI à liseré ---------------------------------------------- */
.sa-kpi {
  --kpi-lisere: var(--accent);
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 3px solid var(--kpi-lisere);
  border-radius: 10px; box-shadow: var(--ombre); padding: 14px 16px; min-width: 0;
}
.sa-kpi__libelle { font: 500 11.5px/1.3 var(--police); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texte-3); }
.sa-kpi__valeur { font: 600 27px/1.25 var(--police-mono); color: var(--texte);
  margin: 6px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-kpi__note { font-size: var(--taille-petite); color: var(--texte-2); }
.sa-kpi__note .sa-hausse { color: var(--vert-texte); font-weight: 600; }
.sa-kpi__note .sa-baisse { color: var(--rouge-texte); font-weight: 600; }
.sa-kpi--neutre { --kpi-lisere: var(--texte-3); }
.sa-kpi--alerte { --kpi-lisere: var(--rouge); background: var(--rouge-teinte); border-color: var(--rouge-trait); }
.sa-kpi--alerte .sa-kpi__valeur { color: var(--rouge-texte); }

/* ---------- Table dense ------------------------------------------------------ */
.sa-table-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-table { width: 100%; border-collapse: collapse; font-size: var(--taille-table); color: var(--texte); }
.sa-table th {
  text-align: left; padding: 8px 10px; background: var(--surface-2);
  border-bottom: 1px solid var(--trait);
  font: 600 10.5px/1.3 var(--police); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--texte-3); white-space: nowrap;
}
.sa-table td { padding: 7px 10px; border-bottom: 1px solid var(--trait-doux); vertical-align: middle; }
.sa-table tbody tr:hover td { background: var(--surface-2); }
.sa-table .sa-num, .sa-table .sa-droite { text-align: right; }
.sa-tactile .sa-table td { padding: 12px 10px; }

/* ---------- Bandeau d'état --------------------------------------------------- */
.sa-bandeau-etat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 7px 22px; background: var(--bandeau); border-bottom: 1px solid var(--bandeau-trait);
  font-size: var(--taille-petite); color: var(--texte-2);
}
.sa-bandeau-etat strong { color: var(--texte); font-weight: 600; }
.sa-bandeau-etat .sa-sep { color: var(--texte-3); }
.sa-point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); flex: none; display: inline-block; }
.sa-point--vert { background: var(--vert-vif); animation: sa-pulse 2s infinite; }
.sa-point--rouge { background: var(--rouge); }
.sa-point--orange { background: var(--ambre); }
@keyframes sa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 143, 107, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(47, 143, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 143, 107, 0); }
}
@media (prefers-reduced-motion: reduce) { .sa-point--vert { animation: none; } }

/* Bandeau d'annonce dans le contenu (succès / attente / erreur) */
.sa-annonce { padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
  font-size: var(--taille-texte); margin: 0 0 12px; }
.sa-annonce--info   { background: var(--accent-doux); color: var(--accent-texte); }
.sa-annonce--ok     { background: var(--vert-doux);   color: var(--vert-texte); }
.sa-annonce--attente{ background: var(--orange-doux); color: var(--orange-texte); }
.sa-annonce--erreur { background: var(--rouge-doux);  color: var(--rouge-texte); }

/* ---------- Barre en verre (barres seulement) -------------------------------- */
.sa-barre-verre {
  background: var(--verre);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trait);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sa-barre-verre { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sa-barre-verre { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Barres horizontales (balance âgée, ancienneté) ------------------- */
.sa-jauge { height: 8px; border-radius: 4px; background: var(--trait-doux); overflow: hidden; }
.sa-jauge > span { display: block; height: 100%; border-radius: 4px; background: var(--accent-vif); }
.sa-jauge--rouge > span { background: var(--rouge); }
.sa-jauge--orange > span { background: var(--orange); }
.sa-jauge--ambre > span { background: var(--ambre); }
.sa-jauge--vert > span { background: var(--vert); }