/* ---------------------------------------------------------------- jetons */

:root {
  --papier:            #f7f8f7;
  --papier-carte:      #ffffff;
  --papier-creux:      #edf0f1;

  --encre:             #16202a;
  --encre-doux:        #5b6772;
  --encre-tenu:        #8b959c;

  --trait:             #d3d9dc;
  --trait-fort:        #a9b3b9;

  --acier:             #26557f;
  --acier-sombre:      #1b3f5f;
  --acier-voile:       #e7eef4;

  --conforme:          #1b6b48;
  --conforme-voile:    #e6f1eb;
  --limite:            #8a6100;
  --limite-voile:      #f6eedc;
  --non-conforme:      #a82521;
  --non-conforme-voile:#f8e8e7;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "JetBrains Mono",
          Menlo, Consolas, "Liberation Mono", monospace;

  --r: 3px;
  --pas: 4px;
  --largeur-texte: 68ch;
  --largeur-page: 1180px;
}

/* -------------------------------------------------------------- socle */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-underline-offset: 0.18em;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 0.75rem; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

a { color: var(--acier); text-decoration-thickness: 1px; }
a:hover { color: var(--acier-sombre); }

:focus-visible {
  outline: 2px solid var(--acier);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Chiffres tabulaires partout où une donnée est relevée. */
.donnee, input, select, td .donnee, .mesure__valeur, .mesure__tolerance {
  font-variant-numeric: tabular-nums;
}

.donnee {
  font-family: var(--mono);
  font-size: 0.9375em;
  letter-spacing: -0.01em;
}

.surtitre {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--encre-doux);
  margin: 0 0 calc(var(--pas) * 1.5);
}

.discret { color: var(--encre-doux); font-size: 0.875rem; }

/* ------------------------------------------------------------ bandeau */

.bandeau {
  background: var(--encre);
  color: #fff;
  border-bottom: 3px solid var(--acier);
}

.bandeau__interieur {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 0 calc(var(--pas) * 5);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 5);
}

.bandeau__marque {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.bandeau__marque span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9fb4c6;
  display: block;
  font-weight: 400;
}

.bandeau__liens { display: flex; gap: calc(var(--pas) * 4); margin-left: auto; align-items: center; }

.bandeau__lien {
  color: #cdd8e1;
  text-decoration: none;
  font-size: 0.9375rem;
  padding: calc(var(--pas) * 2) 0;
}
button.bandeau__lien {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.bandeau__lien:hover, .bandeau__lien[aria-current="page"] { color: #fff; }
.bandeau__lien[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--acier); }

/* ----------------------------------------------------------- fil d'ariane */
/* La hiérarchie cabinet › site › local › appareil est le modèle de données
   lui-même : le fil n'est pas un ornement, c'est la structure du parc. */

.fil {
  background: var(--papier-carte);
  border-bottom: 1px solid var(--trait);
}

.fil__interieur {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--pas) * 2);
  font-size: 0.875rem;
}

.fil a { color: var(--encre-doux); text-decoration: none; }
.fil a:hover { color: var(--acier); text-decoration: underline; }
.fil__separateur { color: var(--trait-fort); }
.fil__actuel { color: var(--encre); font-weight: 500; }

/* -------------------------------------------------------------- page */

.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: calc(var(--pas) * 7) calc(var(--pas) * 5) calc(var(--pas) * 14);
}

.page__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(var(--pas) * 4);
  margin-bottom: calc(var(--pas) * 6);
}
.page__tete > div:first-child { flex: 1 1 22rem; }
.page__actions { display: flex; gap: calc(var(--pas) * 2); flex-wrap: wrap; }

.pile > * + * { margin-top: calc(var(--pas) * 5); }

/* ------------------------------------------------------------- cartes */

.carte {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--r);
}

.carte__tete {
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
}
.carte__tete h2 { font-size: 0.9375rem; }
.carte__tete .discret { margin-left: auto; }

.carte__corps { padding: calc(var(--pas) * 4); }
.carte__corps--serre { padding: 0; }

/* ------------------------------------------------------------ verdicts */

.verdict {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: var(--r);
  border: 1px solid;
  white-space: nowrap;
}
.verdict::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.verdict--conforme     { color: var(--conforme);     background: var(--conforme-voile);     border-color: #bcd9c9; }
.verdict--limite       { color: var(--limite);       background: var(--limite-voile);       border-color: #e0cda0; }
.verdict--non-conforme { color: var(--non-conforme); background: var(--non-conforme-voile); border-color: #e8bcba; }
.verdict--neutre       { color: var(--encre-doux);   background: var(--papier-creux);       border-color: var(--trait); }

/* ------------------------------------------------------- état documentaire */

.etat {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--encre-doux);
  border-left: 2px solid var(--trait-fort);
  padding-left: calc(var(--pas) * 2);
}
.etat--finalise  { border-color: var(--conforme); color: var(--conforme); }
.etat--transmis  { border-color: var(--acier);    color: var(--acier); }
.etat--annule    { border-color: var(--non-conforme); color: var(--non-conforme); text-decoration: line-through; }

/* ------------------------------------------------------------ tableaux */

table { border-collapse: collapse; width: 100%; }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--encre-doux);
  padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
  border-bottom: 1px solid var(--trait-fort);
  white-space: nowrap;
}

td {
  padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
  border-bottom: 1px solid var(--trait);
  vertical-align: baseline;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfb; }

.nombre { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Rail de conformité : le profil de l'appareil se lit verticalement. */
.mesures td:first-child,
.mesures th:first-child { border-left: 3px solid transparent; padding-left: calc(var(--pas) * 3); }
.mesures tr.est-conforme     td:first-child { border-left-color: var(--conforme); }
.mesures tr.est-limite       td:first-child { border-left-color: var(--limite); }
.mesures tr.est-non-conforme td:first-child { border-left-color: var(--non-conforme); }
.mesures tr.est-non-conforme { background: var(--non-conforme-voile); }
.mesures tr.est-non-conforme:hover { background: #f4dedd; }

.mesure__tolerance { font-family: var(--mono); font-size: 0.8125rem; color: var(--encre-doux); }

/* ------------------------------------------------------------ formulaire */

form { margin: 0; }

.champ { margin-bottom: calc(var(--pas) * 4); }
.champ:last-child { margin-bottom: 0; }

.etiquette {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: calc(var(--pas) * 1.5);
}
.etiquette__note { font-weight: 400; color: var(--encre-doux); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 3);
  color: var(--encre);
  background: var(--papier-carte);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
}
input[type="number"], input[inputmode="decimal"] {
  font-family: var(--mono);
  text-align: right;
}
textarea { min-height: 6rem; resize: vertical; }

input:focus, select:focus, textarea:focus { border-color: var(--acier); }

input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--non-conforme);
  background: var(--non-conforme-voile);
}

.aide { font-size: 0.8125rem; color: var(--encre-doux); margin-top: calc(var(--pas) * 1); }
.erreur-champ { font-size: 0.8125rem; color: var(--non-conforme); margin-top: calc(var(--pas) * 1); }

fieldset { border: none; margin: 0 0 calc(var(--pas) * 5); padding: 0; }
legend { padding: 0; font-weight: 600; margin-bottom: calc(var(--pas) * 3); }

.grille { display: grid; gap: calc(var(--pas) * 4); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pas) * 2);
  min-height: 44px;
  padding: 0 calc(var(--pas) * 4);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid var(--trait-fort);
  background: var(--papier-carte);
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.bouton:hover { background: var(--papier-creux); }

.bouton--principal {
  background: var(--acier);
  border-color: var(--acier);
  color: #fff;
}
.bouton--principal:hover { background: var(--acier-sombre); border-color: var(--acier-sombre); }

.bouton--danger { color: var(--non-conforme); border-color: #e0b3b1; }
.bouton--danger:hover { background: var(--non-conforme-voile); }

.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* -------------------------------------------------------------- messages */

.message {
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait-fort);
  border-radius: var(--r);
  background: var(--papier-carte);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  font-size: 0.9375rem;
}
.message--erreur  { border-left-color: var(--non-conforme); background: var(--non-conforme-voile); }
.message--succes  { border-left-color: var(--conforme);     background: var(--conforme-voile); }
.message--info    { border-left-color: var(--acier);        background: var(--acier-voile); }

/* Un écran vide est une invitation à agir, pas un constat. */
.vide {
  padding: calc(var(--pas) * 12) calc(var(--pas) * 4);
  text-align: center;
  color: var(--encre-doux);
}
.vide p { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- authentification */

.ecran-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(var(--pas) * 5);
}
.ecran-connexion .carte { width: 100%; max-width: 25rem; }

.code-totp {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: calc(var(--pas) * 4);
}

/* ---------------------------------------------------------------- pied */

.pied {
  border-top: 1px solid var(--trait);
  margin-top: calc(var(--pas) * 12);
  padding: calc(var(--pas) * 5);
  font-size: 0.8125rem;
  color: var(--encre-doux);
}
.pied__interieur {
  max-width: var(--largeur-page);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 4);
}
.pied__interieur > :last-child { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; }

/* -------------------------------------------------------------- accès */

.saut-navigation {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: #fff;
  padding: calc(var(--pas) * 3);
  z-index: 10;
}
.saut-navigation:focus { left: calc(var(--pas) * 2); top: calc(var(--pas) * 2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------- adaptatif */

@media (max-width: 720px) {
  .bandeau__interieur, .fil__interieur, .page { padding-left: calc(var(--pas) * 4); padding-right: calc(var(--pas) * 4); }
  .grille--2, .grille--3 { grid-template-columns: minmax(0, 1fr); }
  .page__actions .bouton { flex: 1 1 auto; }
  .defilable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .defilable table { min-width: 40rem; }
}

/* ------------------------------------------------------------ impression */
/* Les procès-verbaux définitifs sortent en PDF via Playwright, mais une page
   consultée à l'écran doit rester imprimable proprement en cabinet. */

@media print {
  :root { --papier: #fff; --papier-carte: #fff; }
  .bandeau, .fil, .pied, .page__actions, .bouton { display: none !important; }
  .page { max-width: none; padding: 0; }
  .carte { border-color: #000; break-inside: avoid; }
  tbody tr { break-inside: avoid; }
  .verdict { border-color: #000; }
  a[href]::after { content: ""; }
}