/* Fiches Police — refonte « Papeterie de luxe » (2026-07-29)
   Direction ui-ux-pro-max + mobile-app-ui-design : 60% papier, 30% encre, 10% or.
   Typo : Playfair Display (titres, OFL) + Inter (corps, OFL), auto-hébergées. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('/fonts/playfair.woff2') format('woff2');
}

:root {
  /* 60 % papier */
  --paper: #FAF9F7;
  --card: #FFFFFF;
  /* 30 % encre */
  --ink: #131B33;
  --ink-2: #2A3352;
  --muted-fg: #6E6862;
  --border: #E8E4DF;
  --border-strong: #D6D0C8;
  /* 10 % or */
  --gold: #2145B8;
  --gold-deep: #16308A;
  --gold-soft: #EAF0FE;
  --gold-ring: rgba(33, 69, 184, .25);
  /* sémantique */
  --ok: #047857; --ok-soft: #EBF7F1;
  --warn-fg: #92400E; --warn-bg: #FCF3DE;
  --danger: #B91C1C; --danger-soft: #FBEFEF; --danger-border: #EBC8C4;
  /* profondeur (ombres teintées encre navy) */
  --shadow-sm: 0 1px 2px rgba(19, 27, 51, .05);
  --shadow: 0 1px 2px rgba(19, 27, 51, .05), 0 10px 28px -12px rgba(19, 27, 51, .14);
  --shadow-lift: 0 2px 4px rgba(19, 27, 51, .06), 0 18px 44px -16px rgba(19, 27, 51, .22);
  --r: 12px; --r-lg: 18px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper); color: var(--ink);
  font-size: 16px; line-height: 1.55;
  min-height: 100dvh;
}
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: .005em; }
h3 { line-height: 1.3; }
button { font: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ---------- Champs ---------- */
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 12px 14px; min-height: 48px;
  transition: border-color .18s, box-shadow .18s;
}
textarea { resize: vertical; }
input::placeholder { color: #767066; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-ring);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--r); border: 1px solid transparent;
  padding: 12px 20px; min-height: 48px; font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: background .18s, box-shadow .18s, border-color .18s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--ink); color: #FDFCFB;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-primary:hover { background: #2C2825; }
.btn-gold {
  background: var(--gold); color: #FFFDF8;
  box-shadow: 0 1px 2px rgba(22, 48, 138, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-gold:hover { background: var(--gold-deep); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: #F4F1EC; }
.btn-danger-ghost { background: var(--card); color: var(--danger); border-color: var(--danger-border); }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.btn-block { width: 100%; margin-top: var(--space-4); }
.btn-lg { min-height: 54px; font-size: 16px; }
.btn-sm { padding: 8px 10px; min-height: 44px; min-width: 44px; }
.btn-link {
  background: none; border: 0; padding: 8px 2px; min-height: 44px;
  color: var(--gold-deep); font-weight: 600; font-size: 14px; text-align: left; justify-self: start;
}
.btn-link:hover { text-decoration: underline; }

/* ---------- Connexion ---------- */
.login-body { display: grid; place-items: center; padding: var(--space-6); background:
  radial-gradient(1200px 500px at 50% -10%, #F3EEE5 0%, var(--paper) 60%); }
.login-card {
  width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow-lift); padding: var(--space-12) var(--space-8); text-align: center;
}
.login-logo {
  display: inline-flex; width: 60px; height: 60px; color: var(--gold);
  background: var(--gold-soft); border: 1px solid #C9D7F6;
  border-radius: 18px; padding: 14px; margin-bottom: var(--space-4);
}
.login-logo .ico, .login-logo svg { width: 100%; height: 100%; }
.login-card h1 { font-size: 30px; }
.login-sub { color: var(--muted-fg); font-size: 14px; margin: var(--space-2) 0 var(--space-8); }
.login-card form { text-align: left; display: grid; gap: var(--space-2); }
.login-card label { font-size: 13px; font-weight: 600; margin-top: var(--space-3);
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 10px; color: var(--muted-fg); border-radius: 8px; }

/* ---------- Coquille (marque partagée topbar mobile / login ; la mise en page bureau est Tabler) ---------- */
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .01em;
  color: #FAF7F2; padding: 0 var(--space-2);
}
.brand-ico { color: var(--gold); width: 26px; height: 26px; }
.user-name { font-size: 13px; color: #9C958B; font-weight: 600; padding-left: var(--space-2);
  text-transform: uppercase; letter-spacing: .08em; }

.m-topbar { display: none; }
.bottom-nav { display: none; }

/* ---------- Pages ---------- */
.page-head { margin-bottom: var(--space-8); display: grid; gap: var(--space-2); justify-items: start; }
.page-head h2 { font-size: 32px; }
.page-sub { color: var(--muted-fg); font-size: 15px; max-width: 56ch; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6); margin-bottom: var(--space-4);
}
.card h3 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2); margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}
.card h3 .ico { color: var(--gold); width: 18px; height: 18px; }
.step-n {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--gold);
  letter-spacing: 0;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fld { display: grid; gap: 6px; align-content: start; }
.fld label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fld-wide { grid-column: 1 / -1; }
.req { color: var(--gold-deep); }
.help { font-size: 13.5px; color: var(--muted-fg); }
.muted { color: var(--muted-fg); }

.form-actions { display: grid; gap: var(--space-3); margin: var(--space-6) 0 var(--space-8); }
.form-actions-inline { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.form-error {
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border);
  border-radius: var(--r); padding: var(--space-3) var(--space-4); font-size: 14px; font-weight: 600;
}
.notice {
  background: var(--gold-soft); color: var(--gold-deep); border: 1px solid #C9D7F6;
  border-radius: var(--r); padding: var(--space-3) var(--space-4);
  font-size: 14px; margin-bottom: var(--space-4);
}
.quick-prop { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.quick-prop input { flex: 1 1 220px; }
.quick-prop .btn { flex: none; }

/* ---------- Import & document ---------- */
.import-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted-fg); min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold); }
.doc-stage {
  position: relative; margin-top: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
}
.doc-stage img#doc-img { display: block; width: 100%; height: auto; }
.doc-stage:has(#doc-img[hidden]) { border: 0; box-shadow: none; background: none; }
.doc-placeholder {
  display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-12) var(--space-4); text-align: center; color: var(--muted-fg);
  border: 2px dashed var(--border-strong); border-radius: var(--r);
}
.doc-placeholder .ico { width: 46px; height: 46px; color: var(--gold); }
#sig-float {
  position: absolute; touch-action: none; cursor: grab;
  outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 4px;
  background: rgba(161, 98, 7, .05);
}
#sig-float:active { cursor: grabbing; }
.doc-view { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---------- Signature ---------- */
.sig-wrap {
  position: relative; border: 2px dashed var(--border-strong); border-radius: var(--r);
  background: var(--card); overflow: hidden; transition: border-color .18s;
}
.sig-wrap:focus-within, .sig-wrap:hover { border-color: var(--gold); }
.sig-wrap canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.sig-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: #C9C2B8;
  pointer-events: none;
}
.sig-actions { margin-top: var(--space-3); }
.sig-existing img, .sig-view {
  max-width: 320px; width: 100%; border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
}
.sig-existing { margin-bottom: var(--space-4); display: grid; gap: var(--space-2); }

/* ---------- Barre d'enregistrement ---------- */
.save-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.actions-row { display: flex; gap: var(--space-3); }
.actions-row .btn { flex: 1 1 auto; width: auto; }

/* ---------- Recherche, puces, listes ---------- */
.search-wrap { position: relative; margin-bottom: var(--space-3); }
.search-wrap .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); }
.search-wrap input { padding-left: 44px; border-radius: 999px; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.chip {
  border: 1px solid var(--border-strong); background: var(--card); border-radius: 999px;
  padding: 9px 16px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s, color .18s, border-color .18s;
}
.chip .ico { width: 16px; height: 16px; color: var(--gold); }
.chip:hover { background: #F4F1EC; }
.chip.active { background: var(--ink); border-color: var(--ink); color: #FAF7F2; }
.chip.active .ico { color: #B9C9F5; }
.chip-n { opacity: .65; font-weight: 500; }
.chip-group { display: inline-flex; align-items: center; }
.chip-group .chip { border-radius: 999px 0 0 999px; }
.chip-x {
  border: 1px solid var(--border-strong); border-left: 0; background: var(--card); color: var(--muted-fg);
  border-radius: 0 999px 999px 0; padding: 9px 13px; min-height: 44px; font-size: 16px; line-height: 1;
  transition: background .18s, color .18s;
}
.chip-x:hover { background: var(--danger-soft); color: var(--danger); }

.month-head {
  font-family: var(--serif); font-size: 17px; font-weight: 600; text-transform: capitalize;
  color: var(--ink); margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.month-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.list { display: grid; gap: var(--space-2); }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--space-3) var(--space-4); min-height: 68px;
  transition: box-shadow .18s, border-color .18s, transform .12s;
}
button.row:hover { border-color: #B9C9F5; box-shadow: var(--shadow); transform: translateY(-1px); }
.row-static { cursor: default; }
.row-main { display: grid; gap: 2px; min-width: 0; }
.row-title { font-weight: 600; font-size: 15.5px; }
.row-sub { font-size: 13px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.row-num { font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 5px 11px;
}
.badge .ico { width: 13px; height: 13px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }

.dts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
.dt { display: grid; gap: 2px; font-size: 15px; }
.dt span { font-size: 11.5px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .06em; }
.detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }

.empty-card {
  background: var(--card); border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: var(--space-12); text-align: center; display: grid; gap: var(--space-4); justify-items: center;
  color: var(--muted-fg);
}
.empty-card .ico { width: 36px; height: 36px; color: var(--gold); }

.arch { margin-top: var(--space-8); }
.arch summary { cursor: pointer; color: var(--muted-fg); font-size: 14px; font-weight: 600;
  padding: var(--space-2) 0; min-height: 44px; display: flex; align-items: center; }
.arch .row { margin-top: var(--space-2); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #FAF7F2; border: 1px solid var(--gold-ring);
  border-radius: 999px; padding: 13px 24px; font-size: 14px; font-weight: 600;
  opacity: 0; transition: opacity .22s, transform .22s; z-index: 50; max-width: 90vw;
  box-shadow: var(--shadow-lift);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); border-color: transparent; color: #fff; }

/* ---------- Aperçu plein écran ---------- */
body.scroll-locked { overflow: hidden; }
.preview-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  flex-direction: column; background: rgba(20, 17, 15, .94);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.preview-modal.open { display: flex; }
.preview-top {
  display: flex; align-items: center; justify-content: space-between;
  color: #FAF7F2; font-family: var(--serif); font-size: 17px;
  padding: var(--space-3) var(--space-4);
}
.preview-top .btn { min-width: 44px; background: transparent; color: #E7E2DC; border-color: rgba(250, 247, 242, .25); }
.preview-body {
  flex: 1; overflow: hidden; display: grid; place-items: center;
  margin: 0 var(--space-3); border-radius: var(--r); background: #26211D;
  touch-action: none;
}
#pv-img { max-width: 100%; max-height: 100%; display: block; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.preview-hint { text-align: center; color: #9C958B; font-size: 12.5px; padding: var(--space-2); }
.preview-foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.preview-foot .btn { flex: 1; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .m-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ink); color: #FAF7F2;
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 10;
  }
  .m-topbar .brand { color: #FAF7F2; font-size: 18px; padding: 0; margin: 0; }
  .m-topbar .btn-ghost { background: transparent; color: #E7E2DC; border-color: rgba(250, 247, 242, .22); }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 24px rgba(19, 27, 51, .07);
  }
  .bn-btn {
    display: grid; justify-items: center; gap: 3px; background: none; border: 0;
    padding: 10px 4px 9px; min-height: 58px; font-size: 11px; font-weight: 600; color: var(--muted-fg);
  }
  .bn-btn.active { color: var(--gold-deep); }
  .grid2, .dts, .save-meta { grid-template-columns: 1fr; }
  .page-head h2 { font-size: 26px; }
  .detail-actions .btn { flex: 1 1 auto; }
  /* actions principales dans la zone du pouce */
  .actions-row {
    position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5;
    background: linear-gradient(to top, var(--paper) 78%, rgba(250, 249, 247, 0));
    padding: var(--space-3) 0 var(--space-2); margin: 0 calc(-1 * var(--space-1));
  }
}

/* ---------- Impression A4 (fiche champs + document signé) ---------- */
.print-body { background: #EBE7E1; padding: var(--space-6) var(--space-3); }
.sheet {
  max-width: 210mm; margin: 0 auto; background: #fff; color: #111;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow);
  padding: 14mm 12mm;
}
.p-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4);
  border-bottom: 2.5px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
.p-head h1 { font-family: var(--sans); font-size: 19px; letter-spacing: .04em; font-weight: 700; }
.p-sub { font-size: 12px; color: #555; }
.p-ref { font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-etab { border: 1.5px solid #111; border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; }
.p-etab-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #555; }
.p-etab-value { font-size: 15px; font-weight: 700; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.p-row { display: grid; grid-template-columns: 46% 54%; align-items: end; gap: 8px;
  border-bottom: 1px dotted #999; padding: 7px 0 3px; min-height: 34px; }
.p-label { font-size: 11.5px; font-weight: 600; }
.p-en { display: block; font-size: 9.5px; color: #777; font-weight: 400; font-style: italic; }
.p-value { font-size: 14px; font-weight: 600; word-break: break-word; }
.p-sign { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; margin-top: 18px; align-items: start; }
.p-sign-box { border: 1.5px solid #111; border-radius: 4px; padding: 8px 12px; min-height: 110px; }
.p-sign-img { max-height: 90px; max-width: 100%; display: block; margin-top: 4px; }
.p-sign-empty { height: 80px; }
.p-foot { margin-top: 16px; font-size: 10px; color: #777; text-align: center; }
.print-actions { max-width: 210mm; margin: var(--space-4) auto 0; display: flex; gap: var(--space-3); }
.sheet-doc { padding: 6mm; }
.doc-full { display: block; width: 100%; }

@media print {
  .print-body { background: #fff; padding: 0; }
  .sheet { border: 0; box-shadow: none; border-radius: 0; max-width: none; padding: 8mm 6mm; }
  .sheet-doc { padding: 0; }
  .no-print { display: none !important; }
  @page { size: A4; margin: 10mm; }
}
@media (max-width: 700px) {
  .p-grid, .p-sign { grid-template-columns: 1fr; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Scène unique « document » (2026-07-29) ---------- */
.doc-hero {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow-lift); padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.doc-hero .doc-stage { box-shadow: var(--shadow); border-color: var(--border-strong); }
.doc-hero .doc-stage:has(#doc-img:not([hidden])) {
  outline: 1px solid #E4D3AE; outline-offset: 4px;
}
.sig-strip { margin-top: var(--space-6); }
.sig-strip-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sig-label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2);
}
.sig-label .ico { color: var(--gold); width: 18px; height: 18px; }
.sig-strip .sig-wrap canvas { height: 150px; }

.actions-bar {
  display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: var(--space-3);
  align-items: start; margin: 0 0 var(--space-8);
}
.bien-inline { display: grid; gap: var(--space-2); }
.bien-inline select { min-width: 200px; }
.actions-bar .actions-row { margin: 0; }
.actions-bar .actions-row .btn { min-width: 150px; }

@media (max-width: 991.98px) {
  .doc-hero { padding: var(--space-4); border-radius: var(--r-lg); }
  .actions-bar {
    grid-template-columns: 1fr;
    position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5;
    background: linear-gradient(to top, var(--paper) 82%, rgba(250, 249, 247, 0));
    padding: var(--space-3) 0 var(--space-2);
  }
  .actions-row { position: static; background: none; padding: 0; margin: 0; }
}

/* ---------- Sélecteur de mode (questions / PDF) ---------- */
.segmented {
  display: inline-flex; gap: 4px; margin-top: var(--space-3);
  background: #EFEBE4; border: 1px solid var(--border); border-radius: 999px; padding: 4px;
}
.seg-btn {
  border: 0; background: none; border-radius: 999px;
  padding: 10px 20px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--muted-fg);
  transition: background .18s, color .18s, box-shadow .18s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--ink); color: #FAF7F2; box-shadow: var(--shadow-sm); }

/* ---------- Page 2 : conditions générales + enfants ---------- */
.sheet-cg { margin-top: var(--space-6); }
.cg-h { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  margin: 11px 0 4px; color: #111; }
.cg-main { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .03em;
  border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 12px; color: #111; }
.cg-h:first-child { font-size: 17px; border-bottom: 2px solid #111; padding-bottom: 6px; margin-top: 0; }
.cg-p { font-size: 9.5px; color: #222; margin: 0 0 7px; line-height: 1.5; }
.p-children { margin-top: 12px; border: 1px solid #999; border-radius: 4px; padding: 8px 12px; }
.p-child { font-size: 12px; padding: 3px 0; }
@media print {
  .sheet-cg { page-break-before: always; margin-top: 0; }
}

/* ---------- Bien en haut de page + enfants ---------- */
.bien-top { padding: var(--space-4) var(--space-6); }
.bien-top .bien-inline { display: grid; gap: var(--space-2); }
.bien-label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2);
}
.bien-label .ico { color: var(--gold); width: 18px; height: 18px; }
.actions-only { grid-template-columns: 1fr; }
.children-slot { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.child-card {
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--r); padding: var(--space-4); background: #FDFCFA;
}
.child-card h4 {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); margin-bottom: var(--space-3);
}
.child-card h4 .ico { color: var(--gold); width: 16px; height: 16px; }

/* ---------- Bilingue : anglais en petit ---------- */
.lbl-en { font-size: 11px; font-weight: 400; font-style: italic; color: var(--muted-fg); letter-spacing: 0; text-transform: none; }
.h3-en { font-size: 11px; font-weight: 400; font-style: italic; color: var(--muted-fg); letter-spacing: .02em; text-transform: none; margin-left: 2px; }

/* ---------- Impression : modèle CESEDA ---------- */
.p-intro, .p-cnil { font-size: 10.5px; color: #333; line-height: 1.5; margin: 0 0 10px; }
.p-cnil { margin: 14px 0 0; }
.p-grid-ceseda { grid-template-columns: 1fr; }
.p-children-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.p-children-title .p-en { display: block; font-size: 9.5px; color: #777; font-weight: 400; font-style: italic; }
.p-child-block { margin: 8px 0; }
.p-child-head { font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.p-children { border: 1px solid #999; border-radius: 4px; padding: 8px 12px; margin-top: 12px; }

/* ---------- Pièce d'identité : scan & vignettes ---------- */
.scan-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.id-thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.id-thumb { position: relative; display: inline-flex; }
.id-thumb img {
  width: 110px; height: 78px; object-fit: cover;
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff;
  box-shadow: var(--shadow-sm);
}
.id-thumb-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card); color: var(--muted-fg); font-size: 14px; line-height: 1;
  display: grid; place-items: center;
}
.id-thumb-x:hover { background: var(--danger-soft); color: var(--danger); }

/* Badge d'environnement de test (page de connexion) */
.env-badge {
  display: inline-block; margin: 0 0 var(--space-4);
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid #EAD9A8;
  border-radius: 999px; padding: 6px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
}

/* ---------- Logo KECH-ID ---------- */
.login-logo-img {
  display: block; width: 250px; max-width: 100%; margin: 0 auto var(--space-2);
  border-radius: 12px;
}
.brand-img {
  width: 30px; height: 30px; border-radius: 8px; background: #fff;
  object-fit: cover; flex: none;
}

/* ---------- Accueil : statistiques ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-4); display: grid; gap: 2px; box-shadow: var(--shadow-sm);
}
.stat-n { font-family: var(--serif); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12.5px; color: var(--muted-fg); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-warn .stat-n { color: var(--warn-fg); }
.home-actions { margin-bottom: var(--space-4); }

/* ---------- Journal d'activité ---------- */
.log-list { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; }
.log-line {
  display: grid; grid-template-columns: 92px 84px 1fr; gap: var(--space-2);
  font-size: 13px; padding: 7px 10px; border-radius: 8px; background: #FBFAF8;
  border-left: 3px solid var(--border-strong); align-items: baseline;
}
.log-ts { color: var(--muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-cat { color: var(--muted-fg); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.log-msg { word-break: break-word; }
.log-succes { border-left-color: var(--ok); }
.log-avertissement { border-left-color: #D9A441; background: #FCF8EE; }
.log-erreur { border-left-color: var(--danger); background: var(--danger-soft); }

@media (max-width: 991.98px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .bottom-nav-5 { grid-template-columns: repeat(5, 1fr); }
  .bn-btn { font-size: 10px; }
  .log-line { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Intégration Tabler 1.4.0 (MIT) ---------- */
:root {
  --tblr-primary: #2145B8;
  --tblr-primary-rgb: 33, 69, 184;
  --tblr-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
}
.page { background: var(--paper); }
.page-wrapper { min-height: 100dvh; }
.navbar-vertical.navbar { background: var(--ink) !important; width: 15rem; }
.brand-kechid { font-family: var(--serif); font-size: 19px; letter-spacing: .01em;
  display: flex; align-items: center; gap: 10px; }
.brand-kechid .brand-img { width: 30px; height: 30px; border-radius: 8px; background: #fff; }
.navbar-vertical .nav-link { gap: 10px; font-weight: 500; min-height: 44px; cursor: pointer; }
.navbar-vertical .nav-link .ico { width: 20px; height: 20px; }
.navbar-vertical .nav-link.active { color: #fff; background: rgba(33, 69, 184, .35); border-radius: 8px; }
.sidebar-foot-t { display: grid; padding: 0 4px; }
.sidebar-foot-t .user-name { color: #9aa3c0; }
/* Règle unique (fusion de l'ancien doublon) : valeurs effectives inchangées */
.content { padding: var(--space-8); max-width: 880px; width: 100%; margin: 0 auto; }

/* connexion Tabler */
.login-card-t { box-shadow: var(--shadow-lift); border-radius: 22px; text-align: center; }
.login-card-t form { text-align: left; }
.login-card-t .form-label { font-weight: 600; }

/* champs Tabler qui cohabitent avec nos styles globaux */
.form-control, .form-select { font-size: 16px; }

@media (max-width: 991.98px) {
  .content { padding: var(--space-8) var(--space-4) calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Le document vivant (mode questions) ---------- */
.scan-row-top { margin-bottom: var(--space-3); }
.doc-live {
  position: relative; background: #FFFEFA; color: #131B33;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 26px 22px; margin-bottom: var(--space-4);
  box-shadow: 0 2px 4px rgba(19,27,51,.05), 0 26px 70px -28px rgba(19,27,51,.28);
}
.dl-head { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2.5px solid #131B33; padding-bottom: 8px; }
.dl-title { font-family: var(--sans); font-size: 15.5px; font-weight: 800;
  letter-spacing: .06em; margin: 0; }
.dl-num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #79809B; }
.dl-etab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1.2px solid #131B33; border-radius: 6px; padding: 8px 12px; margin: 14px 0 6px; }
.dl-etab-lab { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #79809B; }
.dl-etab-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.dl-etab-ctl select { max-width: 320px; min-height: 40px; padding: 6px 10px;
  font-weight: 650; border: 1px dashed var(--border-strong); background: transparent; }
.dl-row { display: grid; grid-template-columns: minmax(160px, 44%) 1fr; align-items: end;
  gap: 10px; border-bottom: 1px dotted #B9B2A2; padding: 7px 0 2px; min-height: 38px; cursor: text; }
.dl-lab { font-size: 11px; font-weight: 600; }
.dl-lab i { display: block; font-size: 9px; color: #79809B; font-style: italic; font-weight: 400; }
.dl-val, .dl-val:focus {
  border: 0; background: transparent; padding: 2px 0; min-height: 26px;
  font-size: 15px; font-weight: 650; color: #131B33; border-radius: 4px;
  box-shadow: none; width: 100%;
}
.dl-val:focus { outline: 2px solid var(--gold-ring); outline-offset: 2px; }
.dl-flash { animation: dlfill 1.1s ease-out; }
@keyframes dlfill { 0% { background: var(--gold-soft); } 100% { background: transparent; } }
.doc-live .children-slot { margin-top: var(--space-3); }
.doc-live .child-card { background: #FBF9F2; }
.dl-sign { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; margin-top: 18px; align-items: end; }
.dl-sign-date strong { font-size: 15px; }
.dl-sigbox { border: 1.4px solid #131B33; border-radius: 6px; padding: 8px 12px; }
.dl-sigbox-head { display: flex; justify-content: space-between; align-items: baseline; }
.sig-wrap-doc { border: 0; background: transparent; }
.sig-wrap-doc canvas { height: 120px; }
.save-stamp {
  position: absolute; right: 7%; bottom: 12%; width: 230px; padding: 14px 10px;
  border: 4px double #1D7A4F; border-radius: 10px; color: #1D7A4F;
  font-weight: 800; font-size: 22px; letter-spacing: .1em; text-align: center;
  text-transform: uppercase; transform: rotate(-7deg) scale(3); opacity: 0; pointer-events: none;
}
.save-stamp small { display: block; font-size: 11px; letter-spacing: .16em; }
.save-stamp.go { animation: slam .45s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes slam { to { transform: rotate(-7deg) scale(1); opacity: .92; } }
@media (prefers-reduced-motion: reduce) {
  .save-stamp.go { animation: none; transform: rotate(-7deg) scale(1); opacity: .92; }
  .dl-flash { animation: none; }
}
@media (max-width: 640px) {
  .doc-live { padding: 18px 16px; }
  .dl-row { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .dl-sign { grid-template-columns: 1fr; }
}

/* ---------- Super-admin & 2FA ---------- */
.badge-super { display:inline-block; background:var(--ink); color:#B9C9F5;
  border-radius:999px; padding:2px 10px; font-size:11px; font-weight:700; letter-spacing:.06em; }
.card-super { border-left:4px solid var(--gold); }
.tfa-lead { color:var(--muted-fg); font-size:14px; margin:6px 0 16px; }
.tfa-input { font-size:26px; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums; }
.tfa-back { text-align:center; margin-top:16px; font-size:14px; }
.tfa-back a { color:var(--muted-fg); }
.tfa-enroll { margin-top:12px; }
.tfa-steps { color:var(--ink-2); font-size:14px; padding-left:20px; margin:0 0 14px; }
.tfa-qr { display:grid; place-items:center; padding:12px; background:#fff; border:1px solid var(--border);
  border-radius:12px; width:max-content; margin-bottom:12px; }
.tfa-qr svg { width:180px; height:180px; display:block; }
.tfa-key code { background:var(--gold-soft); color:var(--gold); border-radius:6px; padding:3px 10px;
  font-family:ui-monospace,Menlo,monospace; letter-spacing:.1em; }

/* ---------- Conformité : consentement scan, corbeille, purge (2026-07-30) ---------- */
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px;
  background: var(--gold-soft); border: 1px solid var(--gold-ring); border-radius: var(--r);
  cursor: pointer; min-height: 44px; }
.consent input[type=checkbox] { width: 22px; height: 22px; min-width: 22px; margin-top: 2px; accent-color: var(--gold); cursor: pointer; }
.consent:focus-within { box-shadow: 0 0 0 3px var(--gold-ring); }
.consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent-txt { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.consent-txt .lbl-en { display: block; font-size: 12px; color: var(--muted-fg); font-style: italic; margin-top: 2px; }
@keyframes consentFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(185,28,28,0); } 30% { box-shadow: 0 0 0 4px var(--danger-border); border-color: var(--danger); } }
.consent-flash { animation: consentFlash .9s ease; }

/* GEL DOCUMENT : la retouche du placeholder de base ne doit pas cascader dans le document.
   (#quick-prop-name est un descendant de .doc-live) — on restaure la valeur d'origine. */
.doc-live input::placeholder { color: #A8A29E; }

.head-actions { margin-top: 10px; }
.trash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 16px; }
.trash-tools .help { margin: 0; }
.dl-hint { margin: 8px 0 0; color: var(--ok); }
.btn-attn { box-shadow: 0 0 0 3px var(--gold-ring); }

/* ---------- Habillage : états, mobile, accessibilité (2026-07-30) ---------- */

/* États d'attente unifiés (skeleton sobre encre/papier) */
.skel { display: grid; gap: 10px; padding: var(--space-2) 0; }
.skel span {
  display: block; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, #EEEBE6 25%, #F6F4F0 44%, #EEEBE6 63%);
  background-size: 200% 100%;
  animation: skelShimmer 1.3s ease-in-out infinite;
}
.skel span:nth-child(2) { width: 82%; }
.skel span:nth-child(3) { width: 64%; }
@keyframes skelShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel span { animation: none; background: #EEEBE6; }
}

/* Consigne de signature (HORS document — compense le .sig-hint peu contrasté) */
.sig-note { color: var(--ink-2); font-weight: 600; margin: 0 0 var(--space-3); }

/* Croix de retrait de pièce d'identité : zone tactile élargie sans grossir le visuel */
.id-thumb-x { position: absolute; }
.id-thumb-x::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; }

/* Lien d'évitement clavier */
.skip-link {
  position: absolute; left: 10px; top: 10px; z-index: 200;
  background: var(--ink); color: #FAF7F2; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: 10px; text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }

/* Focus programmatique des titres de page (gestion SPA) : pas d'anneau visuel */
.page-head h2[tabindex="-1"]:focus { outline: none; }
#content:focus { outline: none; }

@media (max-width: 991.98px) {
  /* Le toast ne recouvre plus la barre de navigation basse */
  .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* Corbeille : lignes en colonne, boutons pleine largeur */
  .trash-row { flex-direction: column; align-items: stretch; }
  .trash-row .row-side { width: 100%; }
  .trash-row .row-side .btn { flex: 1; }
  /* Croix de retrait plus franche au pouce */
  .id-thumb-x { width: 32px; height: 32px; font-size: 16px; top: -10px; right: -10px; }
}