/* =====================================================================
   PERMABETON — plateforme de rapports

   Charte du site web appliquée à un outil de saisie. Les jetons sont ceux
   du thème : orange #FE5B2C en accent unique, encre #2C3032, gris #647276,
   fond #F7F7F7. Le rayon de 50 px sur un seul angle est la signature du
   thème ; il est réservé ici aux blocs de premier plan — la fiche désordre
   et le bandeau de rapport — et à rien d'autre, sinon il cesse de signifier
   quelque chose.

   Parti pris : ce n'est pas un tableau de bord, c'est un carnet de chantier.
   L'expert saisit debout, sous la pluie, avec des gants parfois. D'où des
   cibles tactiles de 44 px minimum, des libellés qui restent visibles, et
   un état d'enregistrement toujours affiché.
   ===================================================================== */

:root {
  --ink:        #2C3032;
  --ink-soft:   #647276;
  --ink-faint:  #8D989B;
  --orange:     #FE5B2C;
  --orange-dk:  #D8451B;
  --surface:    #FFFFFF;
  --paper:      #F7F7F7;
  --rule:       #E4E6E5;
  --rule-firm:  #B1B7B9;

  --ok:    #2F7D53;
  --warn:  #9A6B12;
  --alert: #A32017;

  --corner: 50px;          /* la signature du thème */
  --radius: 6px;           /* tout le reste */

  --ui: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* Encoche iOS en mode application installée. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: var(--orange-dk); text-underline-offset: 2px; }
a:hover { color: var(--orange); }

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

/* ---------------------------------------------------------------------
   Barre supérieure
   --------------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-wrap: wrap;
}
.top__brand { display: flex; align-items: center; text-decoration: none; }
.top__brand img { height: 22px; width: auto; display: block; }
.top__nav { display: flex; gap: 2px; margin-right: auto; flex-wrap: wrap; }
.top__nav a {
  padding: 9px 13px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}
.top__nav a:hover { background: var(--paper); color: var(--ink); }
.top__nav a[aria-current] { background: var(--ink); color: #fff; }
.top__me { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); }

.shell { max-width: 1120px; margin: 0 auto; padding: 26px 20px 96px; }
.shell--narrow { max-width: 760px; }

/* ---------------------------------------------------------------------
   Titres
   --------------------------------------------------------------------- */

h1.page {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.15;
}
p.page-sub { margin: 0 0 26px; color: var(--ink-soft); }

h2.chap {
  font-size: 19px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}
h2.chap .num { color: var(--orange); font-variant-numeric: tabular-nums; margin-right: 8px; }

.stack > * + * { margin-top: 16px; }
.muted  { color: var(--ink-soft); }
.small  { font-size: 13.5px; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Blocs
   --------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.panel__body { padding: 20px; }
.panel__body > :first-child { margin-top: 0; }
.panel__body > :last-child  { margin-bottom: 0; }
.panel__help {
  margin: 0;
  padding: 12px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-soft);
}

/* Le bandeau du rapport : le seul endroit avec l'angle signature. */
.hero {
  background: var(--ink);
  color: #fff;
  border-radius: 0 var(--corner) 0 0;
  padding: 22px 26px;
  margin-bottom: 20px;
}
.hero h1 { margin: 0 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.hero .hero__meta { color: #A9B3B6; font-size: 14px; }
.hero .hero__doc  { font-family: var(--mono); font-size: 13px; color: #D6DCDD; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------------------------------------------------------------------
   Fiche désordre — traitée comme une fiche de relevé
   --------------------------------------------------------------------- */

.fiche {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-firm);
  border-radius: 0 var(--corner) 0 0;
  margin-bottom: 18px;
  overflow: hidden;
}
.fiche[data-gravite="faible"]   { border-left-color: #2F7D53; }
.fiche[data-gravite="moyen"]    { border-left-color: #9A6B12; }
.fiche[data-gravite="eleve"]    { border-left-color: #C1500F; }
.fiche[data-gravite="critique"] { border-left-color: #A32017; }

.fiche__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.fiche__no {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  min-width: 34px;
}
.fiche__title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fiche__body { padding: 20px; }

/* ---------------------------------------------------------------------
   Champs
   --------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }

/* input[type=search] manquait : le champ de recherche de la liste sortait
   sans largeur, sans bordure et sans hauteur de frappe. */
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=search], select, textarea {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 16px;               /* 16 px : en dessous, iOS zoome au focus */
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  min-height: 44px;
}
textarea { resize: vertical; min-height: 90px; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  outline: 2px solid rgba(254, 91, 44, .18);
  outline-offset: 0;
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alert); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }

/* Barre de filtres de la liste. Le retrait vient du .panel__body qui
   l'enveloppe, comme pour le bloc « Nouveau rapport » : deux blocs voisins
   ne doivent pas avoir deux systèmes d'espacement différents. */
.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.filters .field { margin: 0; }
.filters .field > label { font-size: 13px; }
@media (max-width: 860px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .filters__go { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .filters { grid-template-columns: 1fr; } }

.filters__count {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--paper);
}

.counter { float: right; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--alert); font-weight: 600; }

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn--primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: #fff; }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn--danger { color: var(--alert); border-color: #E3C4C1; }
.btn--danger:hover { background: #FBE6E4; color: var(--alert); }

.btn--sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn--block { width: 100%; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--orange-dk); cursor: pointer; text-decoration: underline;
}
.linkish--danger { color: var(--alert); }

/* ---------------------------------------------------------------------
   Étiquettes d'état
   --------------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
}
.tag--draft     { color: var(--ink-soft); border-color: var(--rule-firm); background: var(--paper); }
.tag--review    { color: var(--warn);  border-color: #E5D5AE; background: #FBF3E1; }
.tag--validated { color: var(--ok);    border-color: #BFDCCB; background: #ECF6F0; }
.tag--archived  { color: var(--ink-faint); border-color: var(--rule); background: #FAFAFA; }

.sev-pill {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
}

/* ---------------------------------------------------------------------
   Listes de rapports
   --------------------------------------------------------------------- */

.reports { list-style: none; margin: 0; padding: 0; }
.reports li { border-bottom: 1px solid var(--rule); }
.reports li:last-child { border-bottom: 0; }
.reports a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  align-items: center;
}
.reports a:hover { background: var(--paper); }
.reports .r-title { font-weight: 600; }
.reports .r-meta  { grid-column: 1; font-size: 13.5px; color: var(--ink-soft); }
.reports .r-right { grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }

.empty-state { padding: 44px 20px; text-align: center; color: var(--ink-soft); }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); font-size: 18px; }

/* ---------------------------------------------------------------------
   Photos
   --------------------------------------------------------------------- */

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.photo {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper); }
.photo__body { padding: 10px; }
.photo__body input { font-size: 14px; padding: 8px 10px; min-height: 38px; }
.photo__no {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--orange); display: block; margin-bottom: 6px;
}
.photo__row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.photo.is-pending { opacity: .55; }
.photo.is-pending::after {
  content: "En attente de réseau";
  display: block; padding: 6px 10px; font-size: 12px;
  background: #FBF3E1; color: var(--warn); font-weight: 600;
}

.dropzone {
  border: 2px dashed var(--rule-firm);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
}
.dropzone.is-over { border-color: var(--orange); background: #FFF4F0; }
.dropzone input[type=file] { display: none; }

/* ---------------------------------------------------------------------
   Tableaux éditables
   --------------------------------------------------------------------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.edit { width: 100%; border-collapse: collapse; min-width: 620px; }
table.edit th {
  text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: var(--ink); padding: 10px 12px;
}
table.edit td { border-bottom: 1px solid var(--rule); padding: 6px; vertical-align: top; }
table.edit input, table.edit select { min-height: 40px; font-size: 15px; }
table.edit .del { width: 46px; text-align: center; }

/* ---------------------------------------------------------------------
   Checklist
   --------------------------------------------------------------------- */

.check { list-style: none; margin: 0; padding: 0; }
.check li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.check li:last-child { border-bottom: 0; }
.check .mark { flex: 0 0 22px; font-weight: 700; line-height: 1.5; }
.check .mark--ok     { color: var(--ok); }
.check .mark--ko     { color: var(--alert); }
.check .mark--warn   { color: var(--warn); }
.check .mark--manual { color: var(--ink-faint); }
.check .detail { display: block; font-size: 13.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */

.alert {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 15px;
  border-left: 3px solid;
  background: var(--surface);
}
.alert--ok    { border-color: var(--ok);     background: #ECF6F0; color: #1E5A3B; }
.alert--error { border-color: var(--alert);  background: #FBE6E4; color: #7C1911; }
.alert--info  { border-color: var(--orange); background: #FFF4F0; color: #8C3212; }

.temp-pw {
  font-family: var(--mono); font-size: 15px; padding: 12px 16px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  user-select: all; word-break: break-all;
}

/* ---------------------------------------------------------------------
   Barre d'enregistrement — toujours visible
   --------------------------------------------------------------------- */

.savebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--rule);
  font-size: 14px;
  z-index: 50;
}
.savebar .state { margin-right: auto; color: var(--ink-soft); }
.savebar .state[data-state="saving"] { color: var(--warn); }
.savebar .state[data-state="saved"]  { color: var(--ok); }
.savebar .state[data-state="offline"]{ color: var(--warn); font-weight: 600; }
.savebar .state[data-state="error"]  { color: var(--alert); font-weight: 600; }

.offline-banner {
  display: none;
  background: var(--warn); color: #fff;
  padding: 9px 20px; font-size: 14px; font-weight: 600;
  text-align: center;
}
body.is-offline .offline-banner { display: block; }

/* ---------------------------------------------------------------------
   QR de la double authentification
   --------------------------------------------------------------------- */

.qr { display: block; width: 200px; height: 200px; background: #fff; padding: 8px; border: 1px solid var(--rule); }
.secret { font-family: var(--mono); font-size: 15px; letter-spacing: .08em; word-break: break-all; }

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .shell { padding: 18px 14px 110px; }
  h1.page { font-size: 24px; }
  .hero { border-radius: 0 32px 0 0; padding: 18px; margin: -18px -14px 18px; }
  .fiche { border-radius: 0 32px 0 0; }
  .panel__body, .panel__head { padding: 15px; }
  .top { padding: 8px 14px; gap: 12px; }
  .top__nav a { padding: 8px 10px; font-size: 14px; }
  .reports a { grid-template-columns: 1fr; padding: 14px 15px; }
  .reports .r-right { grid-row: auto; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .top, .savebar, .hero__actions, .offline-banner { display: none !important; }
}