:root {
  --black: #000;
  --black-soft: #111;
  --white: #fff;
  --white-soft: #FAFAF7;
  --paper: #F7F3E8;
  --line: #D9D9D9;
  --line-dark: #111;
  --muted: #666;
  --red: #B11226;
  --red-dark: #7F0E1C;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --font-ui: "Univers", "Inter", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--white-soft); color: var(--black-soft); font-family: var(--font-ui); }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.header { background: var(--white-soft); border-bottom: 1px solid var(--black-soft); padding: 18px 22px 14px; position: sticky; top: 0; z-index: 20; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: 0 0 auto; }
.brand-title { font-weight: 900; letter-spacing: 0.18em; font-size: 26px; line-height: 1; }
.brand-subtitle { font-weight: 700; letter-spacing: 0.36em; color: var(--muted); font-size: 10px; margin-top: 7px; white-space: nowrap; }
.header-actions { display: flex; gap: 8px; }
.icon-button { border: 1px solid var(--black-soft); background: transparent; width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px; }
.project-strip { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); letter-spacing: 0.24em; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.project-name { color: var(--black); letter-spacing: 0.08em; font-size: 13px; }
.main { flex: 1; padding: 24px 22px 88px; max-width: 980px; width: 100%; margin: 0 auto; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--white-soft); border-top: 1px solid var(--black); display: grid; grid-template-columns: repeat(4,1fr); z-index: 30; }
.nav button { border: 0; border-right: 1px solid var(--line); background: transparent; padding: 12px 6px 10px; font-weight: 800; letter-spacing: .14em; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.nav button.active { color: var(--black); border-top: 4px solid var(--red); padding-top: 8px; }
.view { display: none; }
.view.active { display: block; }
.section-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.section-title .num { font-size: 18px; letter-spacing: 0.08em; }
.section-title h1, .section-title h2 { margin: 0; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.05; }
.section-title h1 { font-size: 26px; }
.section-title h2 { font-size: 21px; }
.kicker { color: var(--muted); letter-spacing: 0.24em; font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stats { border: 1px solid var(--black); display: grid; grid-template-columns: repeat(2,1fr); margin: 18px 0 26px; }
.stat { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat-value { font-size: 48px; line-height: 0.9; letter-spacing: 0.06em; font-weight: 300; }
.stat-label { margin-top: 12px; color: var(--muted); font-weight: 800; letter-spacing: 0.24em; font-size: 11px; text-transform: uppercase; }
.tile { border: 2px solid var(--black); background: var(--white); min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; text-align: left; }
.tile:hover, .tile:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.tile .left { display: flex; align-items: baseline; gap: 22px; }
.tile .num { font-size: 30px; font-weight: 300; letter-spacing: 0.08em; min-width: 44px; }
.tile .title { font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 17px; }
.tile .desc { color: var(--muted); font-size: 13px; margin-top: 5px; letter-spacing: 0.04em; }
.chev { color: #999; font-size: 28px; }
.form-card { border: 2px solid var(--black); background: var(--white); margin: 16px 0; }
.form-head { background: var(--black); color: var(--white); padding: 16px 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.form-ref { font-size: 24px; letter-spacing: 0.16em; font-weight: 900; }
.form-status { font-size: 11px; letter-spacing: 0.24em; font-weight: 900; color: #d4d0c8; text-transform: uppercase; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); }
.field { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 14px 16px; min-height: 76px; }
.field:nth-child(2n) { border-right: 0; }
.field.full { grid-column: 1 / -1; border-right: 0; }
label, .field-label { display: block; color: var(--muted); letter-spacing: 0.24em; text-transform: uppercase; font-size: 11px; font-weight: 800; margin-bottom: 8px; }
input, textarea, select { width: 100%; border: 0; background: transparent; color: var(--black); padding: 0; font-size: 18px; outline: 0; }
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.large-text { min-height: 140px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; }
.chip { border: 1px solid var(--black); background: var(--white); padding: 10px 14px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; font-size: 12px; }
.chip.active, .chip:hover { background: var(--black); color: var(--white); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { border: 2px solid var(--black); background: var(--white); color: var(--black); min-height: 52px; padding: 0 18px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.btn.primary { background: var(--black); color: var(--white); }
.btn.red { color: var(--red); border-color: var(--red); }
.btn.subtle { border-color: var(--line); color: var(--muted); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.photo-card { border: 1px solid var(--black); background: var(--white); min-height: 180px; display: flex; flex-direction: column; }
.photo-card img { width: 100%; height: 160px; object-fit: cover; border-bottom: 1px solid var(--line); }
.photo-meta { padding: 10px; }
.photo-meta strong { display: block; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.photo-meta small { color: var(--muted); }
.empty-photo { border: 1px dashed var(--muted); min-height: 140px; display: grid; place-items: center; color: var(--muted); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.registry-card { border: 1px solid var(--black); background: var(--white); margin: 12px 0; display: grid; grid-template-columns: 1fr auto; }
.registry-main { padding: 18px; }
.registry-ref { font-weight: 900; font-size: 21px; letter-spacing: .12em; }
.registry-meta { color: var(--muted); margin-top: 7px; display: flex; gap: 12px; flex-wrap: wrap; }
.registry-actions { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 116px; }
.registry-actions button { flex: 1; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.registry-actions button:last-child { border-bottom: 0; }
.notice { border-left: 4px solid var(--red); padding: 12px 14px; background: var(--white); color: var(--muted); line-height: 1.5; }
.footer-note { margin-top: 60px; color: var(--muted); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-align: center; font-size: 11px; }
.hidden { display: none !important; }
@media (max-width: 720px) {
  .main { padding: 18px 18px 86px; }
  .brand-title { font-size: 22px; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .field { border-right: 0; }
  .photo-grid { grid-template-columns: 1fr; }
  .tile .title { font-size: 15px; }
  .tile .num { font-size: 25px; }
}
@media print {
  body { background: white; }
  .header, .nav, .main { display: none !important; }
}

/* v1.2 — ajustements SHOMEI : police technique type Simplex / Hershey pour repères, cartouches et numérotation */
:root {
  --engineer-blue: #1E4E8C;
  --font-title: "Univers", "Helvetica Neue", Arial, sans-serif;
  --font-tech: "Hershey Simplex", "Simplex", "TXT", "RomanS", "ISOCP", "Bahnschrift Light", "Arial Narrow", monospace;
  --font-din: var(--font-tech);
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
}
.brand-title, .section-title h1, .section-title h2, .tile .title, .btn, .chip, .quick-tile span:last-child { font-family: var(--font-title); color: var(--black); }
.field-label, label, .kicker, .brand-subtitle, .project-strip, .stat-label, .registry-meta, .photo-meta strong { font-family: var(--font-din); color: var(--engineer-blue); }
.field input, .field select { font-family: var(--font-tech); color: var(--black); font-weight: 300; letter-spacing: .04em; }
.field textarea, .notice, .photo-meta small { font-family: var(--font-serif); color: var(--black); }
.tile .num, .quick-tile .num, .section-title .num, .stat-value { font-family: var(--font-tech); font-weight: 300; display: inline-grid; place-items: center; text-align: center; color: var(--engineer-blue); letter-spacing: .08em; }
.home-actions { display: grid; gap: 12px; }
.tile-main { min-height: 92px; }
.quick-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.quick-tile { border: 2px solid var(--black); background: var(--white); min-height: 96px; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 14px 8px; text-align: center; }
.quick-tile .num { font-size: 30px; line-height: 1; }
.quick-tile span:last-child { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mini-chip { border: 1px solid var(--line); background: var(--white-soft); padding: 7px 9px; font-family: var(--font-din); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--engineer-blue); }
.mini-chip:hover { border-color: var(--black); color: var(--black); }
@media (max-width: 420px) { .quick-row { grid-template-columns: repeat(3, 1fr); gap: 8px; } .quick-tile { min-height: 82px; padding: 10px 4px; } .quick-tile span:last-child { font-size: 10px; } }


/* v1.2 — usage Simplex / Hershey-like
   Univers : titres forts.
   Simplex/Hershey : repères, indices, zones, niveaux, numéros de boutons, cartouches.
   Libre Baskerville : paragraphes, observations, conclusions.
*/
.field-label, label, .kicker, .brand-subtitle, .project-strip, .stat-label, .registry-meta, .photo-meta strong, .mini-chip {
  font-family: var(--font-tech);
  font-weight: 300;
  letter-spacing: .24em;
}
.quick-tile .num, .tile .num {
  justify-self: center;
  align-self: center;
}
.registry-ref, .form-ref, .project-name {
  font-family: var(--font-tech);
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--engineer-blue);
}
.field textarea, .large-text, textarea {
  font-family: var(--font-serif);
  letter-spacing: 0;
}


/* v1.3 — textes rapides et duplication */
#observationChips .mini-chip, #reserveChips .mini-chip, #conclusionChips .mini-chip {
  min-width: 42px;
  justify-content: center;
  text-align: center;
}
#observationChips .mini-chip::after, #reserveChips .mini-chip::after, #conclusionChips .mini-chip::after {
  content: ' · texte';
  letter-spacing: .12em;
}
.registry-actions { min-width: 124px; }


/* v1.4 — libellés explicites des textes rapides */
#observationChips .mini-chip::after, #reserveChips .mini-chip::after, #conclusionChips .mini-chip::after {
  content: none !important;
}
.text-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: left;
}
.text-preset .preset-num {
  font-family: var(--font-tech);
  color: var(--engineer-blue);
  min-width: 28px;
  text-align: center;
}