/* FC Écouen — thème des écrans (couleurs du blason #A7140D).
   À copier dans le <style> d'une page monofichier, ou à servir en fichier séparé.
   Police : Barlow / Barlow Condensed. Avec une CSP stricte, héberger les .woff2 en local
   (font-src 'self') plutôt que d'ouvrir fonts.googleapis.com. */

:root {
  --ink: #231716;
  --muted: #5E5553;
  --line: #E6DCDA;
  --bg: #FBF8F7;
  --surface: #FFFFFF;

  --pri: #A7140D;        /* rouge du blason : boutons, onglets actifs, liens */
  --pri-dark: #721F1B;   /* bandeau */
  --pri-soft: #F7D6D2;   /* pastilles d'icônes, filet du bandeau */
  --danger: #3B0F0C;     /* suppressions : volontairement distinct du rouge de marque */

  --ok-fg: #14532D;      --ok-bg: #DDF2E4;
  --warn-fg: #8A3A0D;    --warn-bg: #FFEBD6;
  --info-fg: #1E4A85;    --info-bg: #E3EDFA;
  --bad-fg: #6B0F0A;     --bad-bg: #F9DAD6;
  --neutral-fg: #4A4341; --neutral-bg: #EFEAE8;

  --radius: 14px;
  --radius-sm: 12px;
  --font: 'Barlow', system-ui, sans-serif;
  --font-title: 'Barlow Condensed', 'Barlow', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }

/* ---- Structure d'un écran mobile ---- */
.fce-app { max-width: 430px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }
.fce-header { background: var(--pri-dark); color: #fff; border-bottom: 3px solid var(--pri-soft); flex: none; }
.fce-header__bar { height: 56px; display: flex; align-items: center; padding: 0 4px; }
.fce-header__title { flex: 1; min-width: 0; font: 700 24px/1.1 var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fce-header__extra { padding: 0 16px 14px; }
.fce-iconbtn { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; padding: 0; }
.fce-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fce-main__spacer { flex: 1; }

/* ---- Barre d'onglets ---- */
.fce-tabbar { flex: none; height: 64px; display: flex; background: var(--surface); border-top: 1px solid var(--line); }
.fce-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.fce-tab--active { color: var(--pri); }

/* ---- Titres et textes ---- */
.fce-h { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fce-title { font: 700 24px/1.1 var(--font-title); }
.fce-muted { color: var(--muted); font-size: 14px; }

/* ---- Cartes et lignes ---- */
.fce-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fce-card--flush { gap: 0; }
.fce-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fce-row:last-child { border-bottom: 0; }
.fce-row__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--pri-soft); color: var(--pri); display: flex; align-items: center; justify-content: center; flex: none; }
.fce-row__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--pri-soft); color: var(--pri-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.fce-row__body { flex: 1; min-width: 0; }
.fce-row__title { font-size: 15px; font-weight: 600; }
.fce-row__sub { font-size: 13px; color: var(--muted); }
.fce-kv { display: flex; gap: 12px; align-items: flex-start; }
.fce-kv__k { flex: 1; font-size: 14px; color: var(--muted); }
.fce-kv__v { text-align: right; font-size: 15px; font-weight: 500; }
.fce-kv--strong .fce-kv__v { font-weight: 600; }

/* ---- Pastilles de statut (toujours avec un libellé) ---- */
.fce-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fce-chip--ok { color: var(--ok-fg); background: var(--ok-bg); }
.fce-chip--warn { color: var(--warn-fg); background: var(--warn-bg); }
.fce-chip--info { color: var(--info-fg); background: var(--info-bg); }
.fce-chip--bad { color: var(--bad-fg); background: var(--bad-bg); }
.fce-chip--neutral { color: var(--neutral-fg); background: var(--neutral-bg); }

/* ---- Bandeaux d'information ---- */
.fce-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; line-height: 1.35; }
.fce-banner--ok { color: var(--ok-fg); background: var(--ok-bg); }
.fce-banner--warn { color: var(--warn-fg); background: var(--warn-bg); }
.fce-banner--info { color: var(--info-fg); background: var(--info-bg); }
.fce-banner--bad { color: var(--bad-fg); background: var(--bad-bg); }

/* ---- Boutons (hauteur 48 px, 44 px en compact) ---- */
.fce-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 18px; border-radius: var(--radius-sm); border: 0; font: 600 16px var(--font); background: var(--pri); color: #fff; cursor: pointer; }
.fce-btn--compact { height: 44px; }
.fce-btn--auto { width: auto; }
.fce-btn--sec { background: #fff; color: var(--pri); border: 1.5px solid var(--pri); }
.fce-btn--ghost { background: transparent; color: var(--pri); }
.fce-btn--danger { background: var(--danger); color: #fff; }
.fce-btn--danger-sec { background: #fff; color: var(--danger); border: 1.5px solid var(--danger); }
.fce-btn[disabled], .fce-btn--disabled { background: var(--neutral-bg); color: var(--muted); border: 0; cursor: not-allowed; }

/* ---- Formulaires ---- */
.fce-field { display: flex; flex-direction: column; gap: 6px; }
.fce-field__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.fce-field__box { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.fce-field__box--error { border-color: var(--bad-fg); }
.fce-field__box input, .fce-field__box select { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 500 16px var(--font); color: var(--ink); }
.fce-field__box textarea { flex: 1; min-width: 0; height: 84px; border: 0; outline: 0; background: transparent; resize: none; font: 500 16px var(--font); color: var(--ink); padding: 12px 0; }
.fce-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; }
.fce-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--pri); }
.fce-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }

/* ---- Sélecteurs ---- */
.fce-seg { display: flex; gap: 2px; padding: 3px; background: var(--neutral-bg); border-radius: var(--radius-sm); }
.fce-seg button { flex: 1; height: 44px; border: 0; border-radius: 10px; padding: 0 4px; background: transparent; color: var(--muted); font: 600 14px var(--font); }
.fce-seg button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(35, 23, 22, .15); }
.fce-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fce-modes button { height: 44px; padding: 0 4px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 14px var(--font); }
.fce-modes button.is-active { background: var(--pri); border-color: var(--pri); color: #fff; }

/* ---- Indicateurs ---- */
.fce-stats { display: flex; gap: 8px; }
.fce-stat { flex: 1; text-align: center; padding: 12px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.fce-stat__v { font: 700 30px/1.1 var(--font-title); }
.fce-stat__k { font-size: 13px; font-weight: 500; color: var(--muted); }
.fce-bar { height: 10px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.fce-bar > span { display: block; height: 100%; background: var(--pri); }

/* ---- Photos de règlement ---- */
.fce-photos { display: flex; gap: 8px; }
.fce-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); background: var(--line); object-fit: cover; flex: none; }
.fce-addphoto { width: 72px; height: 72px; border-radius: var(--radius-sm); border: 2px dashed var(--pri); color: var(--pri); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }

/* ---- Messagerie ---- */
.fce-bubble { max-width: 78%; padding: 10px 14px; font-size: 15px; line-height: 1.35; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.fce-bubble--me { align-self: flex-end; background: var(--pri); color: #fff; border: 0; border-radius: 16px 16px 4px 16px; }
.fce-bubble__name { font-size: 12px; font-weight: 700; color: var(--pri); margin-bottom: 2px; }