/* Interface pensée pour une tablette tenue à bout de bras, en plein soleil :
   fort contraste, grandes cibles tactiles (48 px mini), peu d'éléments par écran. */

:root {
  --vert: #0b5c3f;
  --vert-clair: #e6f2ec;
  --or: #b8860b;
  --texte: #14201b;
  --gris: #5c6b64;
  --bord: #cfd8d3;
  --fond: #f4f7f5;
  --blanc: #fff;
  --rouge: #a3252a;
  --rayon: 12px;
  --touche: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 8px 14px;
  background: var(--vert); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.entete__txt { flex: 1; min-width: 0; }
.entete__t { font-size: 19px; font-weight: 650; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete__s { font-size: 13.5px; opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete__actions { display: flex; align-items: center; gap: 8px; }
.ret {
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.ret--vide { background: none; }
.etat { font-size: 12px; opacity: 0; transition: opacity .25s; }
.etat.est-ok { opacity: .85; }

.reseau:empty { display: none; }
.reseau { background: var(--or); color: #fff; text-align: center; padding: 7px; font-size: 14px; }

.app { max-width: 940px; margin: 0 auto; padding: 16px 14px 110px; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  min-height: var(--touche); padding: 0 20px;
  border-radius: var(--rayon); border: 2px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn--plein { background: var(--vert); color: #fff; }
.btn--plein:active { background: #094c34; }
.btn--fantome { background: var(--blanc); color: var(--vert); border-color: var(--bord); }
.btn--fantome:active { background: var(--vert-clair); }
.btn--petit { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn--large { width: 100%; margin-top: 8px; }
.btn--danger { background: var(--rouge); color: #fff; }
.btn--danger-plat {
  background: none; border: 0; color: var(--rouge);
  width: 100%; margin-top: 26px; text-decoration: underline;
}

.fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  min-height: 58px; padding: 0 30px; z-index: 15;
  border: 0; border-radius: 30px; background: var(--vert); color: #fff;
  font: 600 18px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 6px 18px rgba(11,92,63,.38);
}

/* ── Liste des dossiers ──────────────────────────────────────────────────── */
.cartes-dossiers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dossier {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; font: inherit; color: inherit;
}
.dossier:active { background: var(--vert-clair); }
.dossier__haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dossier__code { font-size: 13px; font-weight: 700; color: var(--gris); letter-spacing: .4px; }
.dossier__nom { font-size: 19px; font-weight: 650; margin: 4px 0 2px; }
.dossier__meta { font-size: 14px; color: var(--gris); }
.dossier__pied { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris); margin-top: 6px; }
.sync--ok { color: var(--vert); }
.sync--local, .sync--modifie { color: var(--or); }

.jauge { height: 6px; background: var(--bord); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.jauge i { display: block; height: 100%; background: var(--vert); }

.pastille { font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.pastille--ok { background: var(--vert-clair); color: var(--vert); }
.pastille--cours, .pastille--manque { background: #fdf1dd; color: #8a5d05; }

.bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fdf1dd; border: 1px solid #eccb8a; color: #7a5203;
  border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 14px; font-size: 15px;
}

.vide { text-align: center; padding: 60px 20px; color: var(--gris); }
.vide__ico { font-size: 56px; }

/* ── Blocs / tableau de bord ─────────────────────────────────────────────── */
.section { font-size: 14px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--gris); margin: 26px 0 10px; }
.bloc {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px; margin-bottom: 12px;
}
.bloc--action { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bloc__haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.bloc__t { font-size: 18px; font-weight: 650; }
.bloc__s { font-size: 14.5px; color: var(--gris); margin: 3px 0 8px; }

.declarants { margin: 10px 0 4px; }
.decl-ligne { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.decl-ligne__b {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  min-height: 48px; padding: 0 14px; cursor: pointer;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 10px;
  font: inherit; color: inherit; text-align: left;
}
.decl-ligne__nom { font-weight: 600; }
.decl-ligne__av { font-size: 13.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.decl-ligne__av.est-ok { color: var(--vert); font-weight: 700; }
.decl-ligne__x {
  width: 48px; border: 1px solid var(--bord); border-radius: 10px;
  background: var(--blanc); color: var(--rouge); font-size: 17px; cursor: pointer;
}

.resume { background: var(--vert); color: #fff; border-radius: var(--rayon); padding: 16px; margin-bottom: 16px; }
.resume__j { height: 8px; background: rgba(255,255,255,.28); border-radius: 4px; overflow: hidden; }
.resume__j i { display: block; height: 100%; background: #fff; }
.resume__t { margin-top: 9px; font-size: 16px; font-weight: 600; }

.actions-grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ── Formulaires ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ__label { font-size: 15.5px; font-weight: 600; color: #26332c; }
.champ__label.est-requis::after { content: ' *'; color: var(--rouge); }
.aide { font-size: 13.5px; color: var(--gris); margin: 0; }
.encart {
  background: var(--vert-clair); border-left: 4px solid var(--vert);
  border-radius: 8px; padding: 12px 14px; font-size: 15px; margin: 0;
}

.saisie {
  width: 100%; min-height: var(--touche); padding: 10px 14px;
  border: 2px solid var(--bord); border-radius: 10px;
  background: var(--blanc); font: inherit; color: inherit;
}
.saisie:focus { outline: none; border-color: var(--vert); }
.saisie--zone { min-height: 96px; resize: vertical; }

.cartes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.carte {
  display: grid; gap: 3px; align-content: center;
  min-height: 76px; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--blanc); border: 2px solid var(--bord); border-radius: var(--rayon);
  font: inherit; color: inherit;
}
.carte.est-choisie { border-color: var(--vert); background: var(--vert-clair); }
.carte__t { font-size: 17px; font-weight: 650; }
.carte__s { font-size: 13px; color: var(--gris); }

.bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 320px; }
.bascule__b {
  min-height: var(--touche); cursor: pointer; font: inherit; font-weight: 600;
  background: var(--blanc); border: 2px solid var(--bord); border-radius: 10px; color: inherit;
}
.bascule__b.est-choisie { border-color: var(--vert); background: var(--vert-clair); color: var(--vert); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 15px; cursor: pointer; font: inherit;
  background: var(--blanc); border: 2px solid var(--bord); border-radius: 22px; color: inherit;
}
.chip.est-choisie { border-color: var(--vert); background: var(--vert-clair); color: var(--vert); font-weight: 600; }
.chip--ajout { border-style: dashed; color: var(--gris); }

.gps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gps__val { font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }

.galerie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vignette { position: relative; width: 104px; height: 104px; }
.vignette img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--bord); }
.vignette__x {
  position: absolute; top: -8px; right: -8px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: var(--rouge); color: #fff; cursor: pointer;
}

.liste { display: grid; gap: 10px; }
.liste__item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 12px;
}
.liste__num {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--vert); color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700;
}
.liste__corps { display: grid; gap: 12px; }

.signature { border: 2px dashed var(--bord); border-radius: var(--rayon); background: var(--blanc); padding: 8px; }
.signature__zone { width: 100%; height: 190px; touch-action: none; display: block; }
.signature__pied { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }

/* ── Assistant / interview ───────────────────────────────────────────────── */
.etapes { display: flex; gap: 5px; margin-bottom: 18px; }
.etapes__p { flex: 1; height: 6px; border-radius: 3px; background: var(--bord); }
.etapes__p.est-faite { background: var(--vert); }

.nav {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  position: sticky; bottom: 0; margin-top: 26px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--fond) 26%);
}
.nav .btn--plein { min-width: 170px; }

.question { background: var(--blanc); border: 1px solid var(--bord); border-left: 5px solid var(--vert);
  border-radius: var(--rayon); padding: 16px 18px; }
.question__n { font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--gris); }
.question__t { font-size: 21px; font-weight: 650; line-height: 1.35; margin: 6px 0 0; }

.reponse { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; display: grid; gap: 8px; }
.reponse__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.reponse__lab { font-size: 15px; font-weight: 650; }
.reponse__etat { font-size: 12.5px; color: var(--vert); background: var(--vert-clair); padding: 3px 9px; border-radius: 12px; }
.reponse__etat.est-modif { color: #8a5d05; background: #fdf1dd; }
.reponse__txt {
  width: 100%; min-height: 128px; padding: 12px 14px; resize: vertical;
  border: 2px solid var(--bord); border-radius: 10px; background: #fcfdfc;
  font: 17px/1.6 Georgia, "Times New Roman", serif; color: inherit;
}
.reponse__txt:focus { outline: none; border-color: var(--vert); background: #fff; }

.recap { display: grid; gap: 12px; background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px; max-height: 46vh; overflow: auto; }
.recap__i b { display: block; font-size: 14.5px; color: var(--gris); font-weight: 600; }
.recap__i p { margin: 3px 0 0; font-family: Georgia, serif; }

.apercu { width: 100%; height: 74vh; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; }

/* ── Divers ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 60;
  background: #14201b; color: #fff; padding: 14px 22px; border-radius: 26px;
  font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: opacity .4s;
}
.toast--ok { background: var(--vert); }
.toast--erreur { background: var(--rouge); }
.toast.is-out { opacity: 0; }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(0,0,0,.5); padding: 20px; }
.modal__boite { background: #fff; border-radius: var(--rayon); padding: 24px; max-width: 420px; width: 100%; }
.modal__txt { font-size: 17px; margin: 0 0 20px; }
.modal__actions { display: flex; gap: 12px; justify-content: flex-end; }

body.hors-ligne .entete { background: #123c2c; }

@media (min-width: 760px) {
  .app { padding: 24px 24px 120px; }
  .question__t { font-size: 24px; }
}