/* ============================================================================
   Captures produit RECOMPOSÉES - fidèles à l'app Open Projets Chantiers.
   Rien de figuratif : on redessine la vraie UII (header emerald, badges de
   statut, timeline de négociation, carte à tracés colorés, page publique).
   Couleurs & libellés tirés du code source (AppShell, maplibre.config, seed).
   ============================================================================ */

/* - Cadre navigateur (mount des captures) - */
.frame {
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lift); border: 1px solid rgba(0,0,0,.06);
}
.frame__bar {
  display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px;
  background: #f6f7f9; border-bottom: 1px solid rgba(0,0,0,.06);
}
.frame__dots { display: flex; gap: 7px; }
.frame__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.frame__dots i:nth-child(1) { background: #ff5f57; }
.frame__dots i:nth-child(2) { background: #febc2e; }
.frame__dots i:nth-child(3) { background: #28c840; }
.frame__url {
  flex: 1; height: 24px; border-radius: 7px; background: #fff; border: 1px solid rgba(0,0,0,.07);
  display: flex; align-items: center; gap: 7px; padding: 0 12px;
  font-family: var(--font-body); font-size: 12px; color: #8a9099;
}
.frame__url svg { width: 12px; height: 12px; color: var(--app-emerald); }
.frame__body { background: #f9fafb; }

/* - Shell app Chantiers (miroir de AppShell.tsx) - */
.app { font-family: var(--font-body); color: #1f2937; }
.app__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 0 22px; background: #fff; border-bottom: 1px solid #e5e7eb;
}
.app__brand { display: flex; align-items: center; gap: 10px; }
.app__espace {
  font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--app-emerald-600);
  display: inline-flex; align-items: center; gap: 5px;
}
.app__espace svg { width: 13px; height: 13px; opacity: .6; }
.app__divider { color: #d1d5db; }
.app__role { font-size: 13px; color: #6b7280; }
.app__nav { display: flex; align-items: center; gap: 4px; }
.app__tab { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #6b7280; }
.app__tab.is-active { background: var(--app-emerald-50); color: var(--app-emerald-700); }
.app__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #9ca3af; }
.app__icon svg { width: 16px; height: 16px; }
.app__demobar {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 22px; background: #fffbeb; border-bottom: 1px solid #fef3c7;
  font-size: 11.5px; color: #92400e;
}
.app__demobar a { color: #92400e; font-weight: 500; text-decoration: underline; }
.app__main { padding: 22px; }

/* - Badges de statut (vocabulaire exact du produit) - */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.st svg { width: 11px; height: 11px; }
.st--attente     { background: #fef3c7; color: #92400e; }   /* en attente */
.st--modif       { background: #ffedd5; color: #9a3412; }   /* modification demandée */
.st--approuve    { background: #d1fae5; color: #065f46; }   /* approuvée / approuvé */
.st--refuse      { background: #fee2e2; color: #991b1b; }   /* refusée / refusé */
.st--abandon     { background: #f3f4f6; color: #6b7280; }   /* abandonnée */
.st--encours     { background: #fef9c3; color: #854d0e; }   /* chantier en cours */
.st--termine     { background: #ccfbf1; color: #115e59; }   /* fin définitive */

/* pastilles carte par statut chantier */
.dotc { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dotc--pas   { background: var(--st-pas-commence); }
.dotc--ouv   { background: var(--st-ouverture); }
.dotc--cours { background: var(--st-en-cours); }
.dotc--susp  { background: var(--st-suspendu); }
.dotc--finp  { background: var(--st-fin-provisoire); }
.dotc--find  { background: var(--st-fin-definitive); }

/* - Portail : en-tête vert « messagerie » + liste de conversations - */
.pt { background: #fff; }
.pt__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--app-emerald-700, #047857); color: #fff; }
.pt__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.pt__id { display: flex; flex-direction: column; line-height: 1.25; }
.pt__name { font-weight: 700; font-size: 14px; }
.pt__count { font-size: 12px; color: #a7f3d0; }
.pt__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pt__toggle { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.15); }
.pt__toggle span { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #fff; }
.pt__toggle span.is-active { background: #fff; color: var(--app-emerald-700, #047857); }
.pt__btn { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.2); font-size: 12.5px; font-weight: 500; color: #fff; }
.pt__filters { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #f0f2f5; }
.pt__search { flex: 1; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e5e7eb; color: #9ca3af; font-size: 13px; }
.pt__search svg { width: 14px; height: 14px; }
.pt__legend { display: flex; justify-content: flex-end; gap: 14px; padding: 8px 16px 4px; }
.pt__legend span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; display: inline-flex; align-items: center; gap: 5px; }
.pt__legend i { width: 18px; height: 6px; border-radius: 999px; background: #d1d5db; display: inline-block; }

.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-left: 3px solid transparent; border-top: 1px solid #f3f4f6; }
.row--action { border-left-color: #fb923c; background: rgba(255,237,213,.5); }
.row__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.row__av--attente { background: #fef3c7; color: #b45309; }
.row__av--approuve { background: #d1fae5; color: #047857; }
.row__av--modif { background: #ffedd5; color: #c2410c; }
.row__av--refuse { background: #fee2e2; color: #b91c1c; }
.row__main { flex: 1; min-width: 0; }
.row__l1 { display: flex; align-items: baseline; gap: 8px; }
.row__title { font-weight: 600; font-size: 13.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__time { margin-left: auto; font-size: 11px; color: #9ca3af; white-space: nowrap; }
.row__l2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.row__sub { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__prog { margin-left: auto; display: flex; gap: 4px; }
.row__prog i { width: 22px; height: 6px; border-radius: 999px; background: #e5e7eb; }

/* - Timeline « WhatsApp » - */
.tl { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px #e5e7eb; background: #fff; }
.tl__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--app-emerald-700, #047857); color: #fff; }
.tl__ic { width: 36px; height: 36px; border-radius: 50%; background: var(--app-emerald-600, #059669); display: grid; place-items: center; font-size: 17px; }
.tl__t { font-weight: 600; font-size: 14px; }
.tl__s { font-size: 12px; color: #a7f3d0; }
.tl__s b { color: rgba(255,255,255,.85); font-weight: 500; }
.tl__feed { background: #efeae2; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }

.ev { display: flex; justify-content: center; }
.ev span { padding: 5px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ev--soumis span { background: #fff; color: #4b5563; }
.ev--resoumis span { background: #dbeafe; color: #1d4ed8; }
.ev--approuve span { background: #d1fae5; color: #047857; }
.ev--modif span { background: #ffedd5; color: #c2410c; }
.ev--refus span { background: #fee2e2; color: #b91c1c; }
.ev em { opacity: .6; font-style: normal; }

.bub { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.bub--in { align-self: flex-start; align-items: flex-start; }
.bub--out { align-self: flex-end; align-items: flex-end; }
.bub__role { font-size: 11.5px; font-weight: 700; }
.bub__role--interv { color: var(--app-emerald-600, #059669); }
.bub__role--gest { color: #2563eb; }
.bub__role--commune { color: #7c3aed; }
.bub__body { padding: 8px 12px; border-radius: 16px; font-size: 13.5px; color: #1f2937; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bub--in .bub__body { background: #fff; border-top-left-radius: 3px; }
.bub--out .bub__body { background: #d9fdd3; border-top-right-radius: 3px; }
.bub__time { font-size: 10px; color: #9ca3af; align-self: flex-end; margin-top: -1px; }

/* Carte structurée dans la timeline (demande / diff) */
.tcard { max-width: 84%; align-self: flex-start; background: #fff; border-radius: 16px; border-top-left-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.07), inset 0 0 0 1px rgba(0,0,0,.04); overflow: hidden; }
.tcard--out { align-self: flex-end; background: #d9fdd3; border-top-left-radius: 16px; border-top-right-radius: 3px; }
.tcard__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.tcard__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.tcard__role { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.tcard__role i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tfield { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.05); }
.tfield:last-child { border-bottom: none; }
.tfield__k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; margin-bottom: 3px; }
.tfield__v { font-size: 13px; color: #1f2937; line-height: 1.4; }
.diff__before { font-size: 12.5px; color: #9ca3af; text-decoration: line-through; text-decoration-color: #d1d5db; }
.diff__after { font-size: 13px; color: #111827; font-weight: 600; }
.diff__tag { display: inline-block; width: 42px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.diff__tag--b { color: #d1d5db; }
.diff__tag--a { color: #9ca3af; }

/* - Panneau de décision - */
.dec { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; background: #efeae2; }
.dec__pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); background: #fff; }
.dec__pill svg { width: 14px; height: 14px; }
.dec__pill--ok { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgba(5,150,105,.2); }
.dec__pill--mod { background: #fff7ed; color: #c2410c; box-shadow: inset 0 0 0 1px rgba(234,88,12,.2); }
.dec__pill--no { background: #fef2f2; color: #dc2626; box-shadow: inset 0 0 0 1px rgba(220,38,38,.2); }
.dec__label { align-self: center; font-size: 11px; color: #9ca3af; background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 12px; }

/* - Barre de composition - */
.compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f0f2f5; }
.compose__att, .compose__send { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.compose__att { background: #fff; color: #6b7280; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.compose__field { flex: 1; height: 38px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff; color: #9ca3af; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.compose__send { background: var(--app-emerald-500, #10b981); color: #fff; }
.compose__send svg, .compose__att svg { width: 16px; height: 16px; }

/* - Carte des dossiers (recomposition du fond vectoriel Liberty) - */
.map { position: relative; width: 100%; aspect-ratio: 16 / 11; background: #eaedf1; overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__nav { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; border-radius: 7px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.map__nav span { width: 28px; height: 28px; background: #fff; display: grid; place-items: center; font-size: 15px; color: #4b5563; }
.map__nav span:first-child { border-bottom: 1px solid #e5e7eb; }
.map__legend { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.95); border-radius: 10px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.3), inset 0 0 0 1px #e5e7eb; padding: 9px 11px; }
.map__legend h5 { font-size: 11px; font-weight: 600; color: #374151; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.map__legrow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #4b5563; line-height: 1.9; }
.map__legrow i { width: 20px; height: 10px; border-radius: 3px; display: inline-block; }
.map__popup { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px -8px rgba(0,0,0,.35); padding: 12px 13px; width: 210px; }
.map__popup::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.map__popup-h { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.map__popup-h b { font-size: 13px; color: #1f2937; }
.map__popup-ref { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: #6b7280; }
.map__popup p { font-size: 11.5px; color: #6b7280; margin-bottom: 2px; }
.map__popup .map__btn { margin-top: 8px; display: block; text-align: center; background: var(--app-emerald-500,#10b981); color: #fff; font-size: 11.5px; font-weight: 600; padding: 7px; border-radius: 8px; }

/* - Téléphone (page publique QR) - */
.phone { width: 300px; max-width: 100%; border-radius: 42px; background: #111; padding: 11px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5), inset 0 0 0 2px #2a2a2a; }
.phone__screen { border-radius: 32px; overflow: hidden; background: #f9fafb; }
.phone__notch { height: 26px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; }
.phone__notch::before { content: ""; width: 90px; height: 6px; border-radius: 999px; background: #111; }
.phone__url { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; background: #f1f3f5; font-size: 11px; color: #8a9099; }
.phone__url svg { width: 11px; height: 11px; color: var(--app-emerald-600,#059669); }

/* - Feuille PDF (arrêté / permission) - */
.pdf { width: 320px; max-width: 100%; background: #fff; border-radius: 6px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.4), inset 0 0 0 1px #eceff3; overflow: hidden; font-size: 9px; }
.pdf__band { background: #059669; color: #fff; text-align: center; padding: 10px; }
.pdf__band h4 { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.pdf__band p { font-size: 8px; color: rgba(255,255,255,.85); margin-top: 2px; }
.pdf__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.pdf__ref { display: flex; justify-content: space-between; font-size: 8.5px; color: #475569; background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; border-radius: 4px; padding: 6px 9px; }
.pdf__sec-h { font-size: 8.5px; font-weight: 700; color: #334155; background: #f1f5f9; box-shadow: inset 0 0 0 1px #cbd5e1; border-radius: 3px; padding: 4px 8px; letter-spacing: .03em; }
.pdf__kv { display: flex; flex-direction: column; gap: 5px; padding: 3px 2px 0; }
.pdf__kv div { display: flex; justify-content: space-between; gap: 12px; }
.pdf__kv span { color: #64748b; }
.pdf__kv b { color: #0f172a; font-weight: 600; text-align: right; }
.pdf__map { height: 62px; border-radius: 4px; overflow: hidden; position: relative; background: #eaedf1; }
.pdf__decision { display: flex; align-items: center; justify-content: space-between; }
.pdf__badge { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: #065f46; background: #d1fae5; box-shadow: inset 0 0 0 1px #a7f3d0; border-radius: 4px; padding: 4px 12px; }
.pdf__qr { width: 42px; height: 42px; border-radius: 4px; }
.pdf__foot { border-top: 1px solid #eceff3; padding: 8px 16px; font-size: 7.5px; color: #94a3b8; display: flex; justify-content: space-between; }

/* - QR code stylisé (motif fidèle, non figuratif) - */
.qr { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); background: #fff; padding: 2px; }
.qr i { background: transparent; }
.qr i.on { background: #0f172a; }