/* SYNAPSE — prototype. Aucun jeton client fourni : une famille (system-ui), un accent (encre bleue),
   grille de 8 px. Les phases sont encodées par la VALEUR (clair → foncé), variable ordonnée de Bertin,
   toujours doublée du code écrit (SI NA PA SE) : la couleur n'est jamais seule porteuse du sens. */
:root{
  --encre:#1b1f24; --gris:#5b6470; --gris-2:#8a929c; --filet:#dfe3e8; --fond:#ffffff; --fond-2:#f6f7f9;
  --accent:#1f4e79; --accent-pale:#e8eef5; --alerte:#b42318; --alerte-pale:#fdecea;
  --si:#dbe4ee; --na:#a5b8cc; --pa:#5d7894; --se:#243b53;
  --u:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--encre);background:var(--fond);font-variant-numeric:tabular-nums}
a{color:var(--accent)}
h1{font-size:22px;line-height:1.25;margin:0 0 4px;font-weight:650}
h2{font-size:16px;margin:32px 0 8px;font-weight:650}
h3{font-size:14px;margin:16px 0 4px;font-weight:650}
p{margin:0 0 8px}
small,.petit{font-size:12.5px;color:var(--gris)}
/* Codes en police proportionnelle : en chasse fixe, la lettre O de NA-O-01 se lit comme un zéro. */
code,.code{font-family:inherit;font-size:.95em;letter-spacing:.01em;background:var(--fond-2);padding:0 2px}

/* Bandeau obligatoire sur chaque écran */
.proto{background:#fff4c2;color:#4a3b00;font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:4px 16px;text-align:center;border-bottom:1px solid #e9d98a}
.proto span{font-weight:400}

/* En-tête de navigation */
.tete{display:flex;align-items:baseline;gap:24px;padding:12px 24px;border-bottom:1px solid var(--filet);flex-wrap:wrap}
.marque{font-weight:700;letter-spacing:.06em;color:var(--encre);text-decoration:none}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--gris);text-decoration:none;padding:2px 0}
.nav a[aria-current]{color:var(--encre);font-weight:600;border-bottom:2px solid var(--accent)}
.qui{margin-left:auto;font-size:12.5px;color:var(--gris)}

main{max-width:1180px;margin:0 auto;padding:24px}
.chapeau{color:var(--gris);max-width:72ch}
.constat{font-size:17px;line-height:1.4;max-width:78ch;margin:8px 0 0}
.constat b{font-weight:650}

/* Tableaux denses, sans grille verticale */
table{border-collapse:collapse;width:100%}
th{font-size:12px;font-weight:600;color:var(--gris);text-align:left;padding:4px 8px;border-bottom:1px solid var(--encre);white-space:nowrap}
td{padding:4px 8px;border-bottom:1px solid var(--filet);vertical-align:top}
td.n,th.n{text-align:right}
tr.attenue td{color:var(--gris-2)}

/* Code de phase : carré de valeur + code écrit */
.ph{display:inline-flex;align-items:center;gap:4px;font-weight:650;font-size:13px}
.ph::before{content:"";width:10px;height:10px;display:inline-block;border:1px solid rgba(0,0,0,.18)}
.ph-SI::before{background:var(--si)} .ph-NA::before{background:var(--na)} .ph-PA::before{background:var(--pa)} .ph-SE::before{background:var(--se)}
.ph-IND::before{background:#fff;border:1px dashed var(--gris)}

.alerte{color:var(--alerte)}
.badge{font-size:12px;padding:0 4px;border-radius:2px;white-space:nowrap}
.badge.rouge{color:var(--alerte);background:var(--alerte-pale)}
.badge.gris{color:var(--gris);background:var(--fond-2)}

.bouton{display:inline-block;font:inherit;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:4px;padding:8px 16px;text-decoration:none;cursor:pointer}
.bouton.second{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bouton[disabled]{background:#c4cad1;cursor:not-allowed}

.pied{max-width:1180px;margin:40px auto 24px;padding:8px 24px 0;border-top:1px solid var(--filet);font-size:12px;color:var(--gris-2)}

@media (max-width:640px){
  main{padding:16px}
  .tete{padding:8px 16px;gap:12px}
  .qui{display:none}
  .proto span{display:none}
  h1{font-size:19px}
}