/* ============================================================================
   EDL Galerie Joseph — thème CLAIR, DA Galerie Joseph / Acumen (reskin v2).
   ----------------------------------------------------------------------------
   Polices de marque AUTO-HÉBERGÉES (offline) :
     • Noto Sans        → corps / UI    (galeriejoseph.com)
     • Barlow Condensed → display/titres (magazine-acumen.com)
   Accent or brass #C9A227 (PDF EDL). Boutons primaires = encre #141414.
   Maquettes & source visuelle : edl-app/design/preview/ (claude.ai/design).
   ⚠ Fichiers woff2 dans static/fonts/ → doivent être dans sw.js SHELL (offline).
   ========================================================================== */

/* === Polices de marque auto-hébergées (latin, OFL) === */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-sans-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/noto-sans-500.woff2') format('woff2')}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/noto-sans-600.woff2') format('woff2')}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-sans-700.woff2') format('woff2')}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/noto-sans-800.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700.woff2') format('woff2')}

:root {
  /* — surfaces claires (papier de galerie) — */
  --bg:        #f6f5f2;   /* page : blanc cassé chaud */
  --bg-2:      #ffffff;   /* fond des champs (ex-usage de --bg en input) */
  --card:      #ffffff;   /* carte */
  --card2:     #faf8f3;   /* carte surélevée / état actif segment */
  --line:      #e6e3da;   /* filets */
  --line-soft: #efece4;   /* séparateurs internes discrets */

  /* — texte (AA sur clair) — */
  --txt:       #141414;   /* texte principal (= texte PDF de marque) */
  --muted:     #6c6a62;   /* gris chaud, ratio ~5.2 sur blanc */

  /* — encre (action primaire, façon luxe minimal galeriejoseph.com) — */
  --ink:       #141414;
  --on-ink:    #ffffff;

  /* — or / brass (accent signature) — */
  --accent:        #c9a227;  /* brass : fonds/filets/sélections */
  --accent-deep:   #8a6a12;  /* or foncé : texte/icône accent lisible sur clair (AA) */
  --accent-soft:   #f6edced9; /* tuile or très clair (fond contextuel/sélection) */
  --accent-dark:   #fbf3da;  /* ex-accent-dark : fond ambré clair */
  --on-accent:     #1a1304;  /* texte SUR aplat or */

  /* — états (re-calés pour fond clair, sémantique conservée) — */
  --green:     #1f9d57;  --green-bg: #e9f6ee;
  --red:       #d8392d;  --red-bg:   #fdebe9;
  --orange:    #b6741a;  --orange-bg:#fbf0dc;

  /* — typo de marque — */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-ui:      'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* — formes — */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* — ombres + relief (sur clair) : liseré clair en haut + portée chaude — */
  --sh-card:  0 1px 0 rgba(255,255,255,.85) inset, 0 1px 2px rgba(40,34,18,.05), 0 10px 26px -12px rgba(40,34,18,.20);
  --sh-raise: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(40,34,18,.08), 0 16px 34px -14px rgba(40,34,18,.26);
  --sh-cta:   0 -2px 18px rgba(40,34,18,.12);
  --sh-pop:   0 20px 52px -14px rgba(25,20,8,.38);
  --sh-inset: inset 0 1px 2px rgba(40,34,18,.07);
  --sh-soft:  0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(40,34,18,.05), 0 4px 12px -7px rgba(40,34,18,.18);

  /* — matière : laiton & encre en dégradé, grain papier — */
  --grad-brass: linear-gradient(155deg, #e6c463 0%, #c9a227 50%, #a07f1c 100%);
  --grad-ink:   linear-gradient(180deg, #2b2b2b 0%, #161616 55%, #0c0c0c 100%);
  --grad-page:  radial-gradient(135% 95% at 50% 0%, #fcfbf8 0%, #f4f2ec 55%, #ece8df 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* — espacement (échelle 4pt) — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

html { touch-action: manipulation; }
button, .btn, .btn-icon, .seg button, .stepper button, .switch,
.thumb-ghost, .pick-item, .btn-rail-toggle, .toggle-row, .deal-card, .edl-head {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

html, body {
  margin: 0; padding: 0;
  background: var(--grad-page); background-attachment: fixed; color: var(--txt);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* grain papier — texture subtile, derrière le contenu (jamais sur le texte) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 120px 120px;
  opacity: .55; mix-blend-mode: multiply;
}
/* padding-top géré par le header (topbar) ou par les écrans sans header (login/clôture),
   pour que le header figé COUVRE la barre d'état (heure/batterie) et garde son contenu dessous */
#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
body.offline #app { padding-top: calc(34px + var(--safe-t)); }

button { font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; }

/* titres display — Barlow Condensed, registre éditorial */
h1, h2, h3 { font-family: var(--font-display); }

/* ---------------------------------------------------------------- loader */
.loader-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.spinner.small { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- offline */
#offline-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: calc(6px + var(--safe-t)) 12px 6px;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 700; text-align: center;
}
body.offline #offline-banner { display: block; }
.offline-note {
  max-width: 640px; margin: 10px 14px 0; padding: 10px 14px;
  background: var(--orange-bg); color: var(--orange);
  border: 1px solid var(--orange); border-radius: 12px;
  font-size: 13px; font-weight: 700; text-align: center;
}

/* ---------------------------------------------------------------- toasts */
#toasts {
  position: fixed; left: 12px; right: 12px; z-index: 200;
  bottom: calc(96px + var(--safe-b));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px;
  font-size: 15px; font-weight: 600; text-align: center;
  box-shadow: var(--sh-pop); animation: toast-in .2s ease-out;
}
.toast.error { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.toast.success { border-color: var(--green); background: var(--green-bg); color: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- layout */
.screen { padding: 0 14px calc(120px + var(--safe-b)); max-width: 640px; margin: 0 auto; }
.screen.no-cta { padding-top: calc(8px + var(--safe-t)); padding-bottom: calc(40px + var(--safe-b)); }

.topbar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 -14px; padding: calc(10px + var(--safe-t)) 14px 12px;  /* full-bleed + couvre la barre d'état (safe-area) */
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);                        /* opaque : header figé, rien ne transparaît */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px -12px rgba(40,34,18,.30);
}
.topbar h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.05; margin: 0; flex: 1; min-width: 0;
  text-transform: uppercase; letter-spacing: .2px;
}
.topbar h1 small {
  display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 2px;
}
.topbar .sub { font-size: 13px; color: var(--muted); }

.btn-icon {
  min-width: 48px; min-height: 48px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--txt); font-size: 20px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-soft);
}
.btn-icon:active { background: var(--card2); }

#save-badge { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; min-width: 24px; text-align: right; }
#save-badge.saved { color: var(--green); }
#save-badge.queued { color: var(--orange); }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 12px 18px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); color: var(--txt);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: var(--sh-soft);
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: scale(.985); }
/* primaire = encre brossée (luxe minimal GJ) */
.btn.primary { background: var(--grad-ink); border-color: #0a0a0a; color: var(--on-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 6px 16px -7px rgba(20,16,4,.55); }
.btn.primary:active { background: #0a0a0a; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; border-style: dashed; border-color: var(--line); color: var(--muted); box-shadow: none; }
.btn.small { min-height: 44px; font-size: 14px; width: auto; padding: 8px 14px; }
.btn:disabled { opacity: .4; pointer-events: none; }

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(12px + var(--safe-b));
  background: linear-gradient(transparent, var(--bg) 38%);
}
.cta-bar .btn {
  max-width: 640px; margin: 0 auto; min-height: 60px;
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  text-transform: uppercase; letter-spacing: .6px; box-shadow: var(--sh-cta);
}

/* Accueil : bouton « + EDL MANUEL » dans le flux normal (pas de barre fixe →
   pas de saut au rebond élastique iOS, signalé en PWA installée). */
.screen.today-screen { padding-bottom: calc(28px + var(--safe-b)); }
.today-add { margin-top: 16px; }
.today-add .btn {
  width: 100%; min-height: 60px; font-family: var(--font-display); font-weight: 600;
  font-size: 21px; text-transform: uppercase; letter-spacing: .6px; box-shadow: var(--sh-cta);
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
  box-shadow: var(--sh-card);
}
.section-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt);
  margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}
.section-title::before {
  content: ''; width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--grad-brass); box-shadow: 0 1px 2px rgba(160,127,28,.45);
}

/* today cards */
.deal-card { cursor: pointer; border-left: 4px solid var(--line); position: relative; }
.deal-card:active { background: var(--card2); }
.deal-card.entree { border-left-color: var(--green); }
.deal-card.sortie { border-left-color: var(--red); }
.deal-card .dc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.deal-card .dc-client { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-card .dc-meta { font-size: 14px; color: var(--muted); line-height: 1.5; }
.deal-card .dc-espace { font-weight: 700; color: var(--txt); }
.deal-card .dc-spots { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--accent-deep); }
.deal-card .dc-hint { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent-deep); }
.deal-card.done { opacity: .62; }

.badge {
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 6px; flex-shrink: 0; line-height: 1.3;
}
.badge.entree { background: var(--green-bg); color: var(--green); }
.badge.sortie { background: var(--red-bg); color: var(--red); }
.badge.draft { background: var(--orange-bg); color: var(--orange); }
.badge.ok { background: var(--green-bg); color: var(--green); }

.empty { text-align: center; color: var(--muted); padding: 24px 12px; font-size: 14px; }

/* ---------------------------------------------------------------- login */
.login-logo { text-align: center; padding: 40px 0 24px; }
.login-logo .glyph { font-size: 42px; color: var(--accent); }
.login-logo h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 34px;
  margin: 12px 0 2px; letter-spacing: 1px; text-transform: uppercase;
}
.login-logo p { color: var(--muted); margin: 0; font-size: 14px; }

.user-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.user-grid .btn { min-height: 72px; font-size: 18px; }

.login-section { margin: 18px 0 6px; }
.login-sec-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.login-section .btn.ghost.wide { width: 100%; margin-top: 12px; min-height: 56px; }
.login-nameform { display: flex; gap: 10px; margin-top: 12px; }
/* FIX bug existant : variables --border/--fg inexistantes → --line/--txt */
.login-nameform input {
  flex: 1; min-height: 56px; font-size: 18px; padding: 0 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; color: var(--txt);
}
.login-nameform input:focus { outline: none; border-color: var(--accent); }
.login-nameform .btn.primary { min-width: 76px; }

.pin-dots { display: flex; justify-content: center; gap: 14px; padding: 22px 0; }
.pin-dots span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); transition: background .1s;
}
.pin-dots span.on { background: var(--accent); border-color: var(--accent); }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 320px; margin: 0 auto; }
.pin-pad .btn { min-height: 68px; font-size: 24px; font-weight: 600; }

/* ---------------------------------------------------------------- segmented */
.seg { display: flex; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 5px; box-shadow: var(--sh-inset); }
.seg button {
  flex: 1; min-height: 48px; border: none; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 700; cursor: pointer;
}
.seg button.on { background: var(--card); color: var(--txt); box-shadow: inset 0 0 0 1.5px var(--accent), 0 2px 6px -2px rgba(40,34,18,.28); }
.seg button.on.ok { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.seg button.on.warn { background: var(--orange-bg); color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); }
.seg-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }

/* ---------------------------------------------------------------- inputs */
.field { margin-bottom: 12px; }
.field label { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.input, textarea.input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--txt); outline: none; box-shadow: var(--sh-inset);
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { min-height: 96px; resize: vertical; }
.field.email-copy { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin-top: 6px; }
.field.email-copy label { color: var(--accent-deep); }
.contact-ro { margin-bottom: 10px; }
.cro-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.cro-row:last-child { border-bottom: none; }
.cro-lbl { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.crm-suggest { margin-top: 4px; background: var(--card); border: 1px solid var(--accent); border-radius: 10px; overflow: hidden; box-shadow: var(--sh-card); }
.crm-opt { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.crm-opt:last-child { border-bottom: none; }
.crm-opt:active { background: var(--accent-soft); }
.crm-opt-nom { font-weight: 700; font-size: 15px; }
.crm-opt-mail { font-size: 13px; color: var(--muted); }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 60px; min-height: 56px; border-radius: 14px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  color: var(--txt); font-size: 26px; font-weight: 700; cursor: pointer;
  box-shadow: var(--sh-soft);
}
.stepper button:active { background: var(--card2); }
.stepper input {
  flex: 1; min-width: 0; min-height: 56px; text-align: center;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  color: var(--txt); outline: none; box-shadow: var(--sh-inset);
}
.stepper input:focus { border-color: var(--accent); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; cursor: pointer; padding: 4px 0; }
/* toggle-row autonome (carte « client absent ») : garder les marges internes de .card
   — sans ça, padding:4px 0 ci-dessus passe le contenu bord à bord (les toggle-row
   des lignes 1170/1182 sont, elles, à l'intérieur d'une carte déjà rembourrée). */
.card.toggle-row { padding: 14px; }
.toggle-row .t-label { font-size: 16px; font-weight: 700; }
.switch {
  width: 58px; height: 34px; border-radius: 17px; flex-shrink: 0;
  background: var(--line); border: none; position: relative; cursor: pointer; transition: background .15s;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(24px); }

/* ---------------------------------------------------------------- progress */
.progress-wrap { position: sticky; top: calc(64px + var(--safe-t)); z-index: 30; padding: 4px 0 10px; background: var(--bg); }
.progress-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; box-shadow: var(--sh-inset); }
.progress-bar > div { height: 100%; background: var(--grad-brass); border-radius: 3px; transition: width .25s; }
.progress-txt { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 5px; text-align: right; }

/* ---------------------------------------------------------------- zones */
.zone-card { padding: 0; overflow: hidden; }
.zone-head { display: flex; align-items: center; gap: 10px; padding: 14px; }
.zone-head h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin: 0; font-size: 19px; flex: 1; min-width: 0; }
.zone-ref { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--line); box-shadow: var(--sh-inset); }
.ref-photo-overlay { justify-content: center; align-items: center; cursor: pointer; }
.ref-photo-overlay img { max-width: 100%; max-height: 90vh; border-radius: 12px; }
.zone-state { font-family: var(--font-display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.zone-state.ok { color: var(--green); }
.zone-state.warn { color: var(--orange); }
.zone-state.todo { color: var(--muted); }

.identique-row { display: flex; gap: 10px; padding: 0 14px 14px; }
.identique-row .btn { min-height: 60px; font-size: 15px; }
.identique-row .btn.sel-ok { background: var(--green); border-color: var(--green); color: #fff; }
.identique-row .btn.sel-warn { background: var(--orange); border-color: var(--orange); color: #fff; }

.zone-body { padding: 0 14px 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.zone-body.hidden { display: none; }

.photo-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); background: var(--card2); box-shadow: var(--sh-inset); }
.thumb-ghost {
  width: 72px; height: 72px; border-radius: 12px;
  border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10px; font-weight: 700; line-height: 1.3; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.thumb-ghost .ico { font-size: 20px; }
.thumb-ghost.muted { border-color: var(--line); color: var(--muted); background: var(--card2); }
.thumb-wrap { position: relative; display: inline-flex; }
.thumb-del {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 2px solid var(--card); background: var(--red); color: #fff;
  font-size: 13px; line-height: 1; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.draft-del { margin-left: auto; border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 4px; cursor: pointer; opacity: .8; }
.draft-del:active { opacity: 1; }
.caution-recall { font-size: 15px; font-weight: 700; color: var(--txt); padding: 6px 0 2px; }

.thumb.pending-thumb { display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px dashed var(--orange); color: var(--orange); }
.rail-row.pending { opacity: .8; }
.rail-row.pending .ai-badge { color: var(--orange); font-size: 12px; }
.rail-row .rail-thumb-pending {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  border: 1px dashed var(--orange); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

/* spots */
.spots-block { margin: 0 14px 14px; padding: 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; }
.spots-ref { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.spots-ref b { color: var(--txt); font-size: 15px; }
.btn-scan { background: var(--card); border: 1px solid var(--accent); color: var(--accent-deep); margin-bottom: 4px; }

.rail-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.rail-row:last-child { border-bottom: none; }
.rail-row img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.rail-row .rail-name { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row .ai-badge { font-size: 14px; font-weight: 800; flex-shrink: 0; }
.rail-row .ai-badge.done { color: var(--accent-deep); }
.rail-row .ai-badge.error { color: var(--red); }
.rail-row.off { opacity: .4; }
.rail-row.off .rail-name { text-decoration: line-through; }
.btn-rail-toggle { min-width: 44px; min-height: 44px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--txt); font-size: 16px; cursor: pointer; }
.rail-count {
  width: 60px; min-height: 44px; flex-shrink: 0; text-align: center;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--txt);
  background: var(--bg-2); border: 1px solid var(--accent); border-radius: 10px; padding: 4px; box-shadow: var(--sh-inset);
}
.rail-count:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rail-count.corrected { border-color: var(--orange); color: var(--orange); }
.rail-count:disabled { opacity: .4; border-color: var(--line); }
.rail-count::-webkit-outer-spin-button, .rail-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ia-suggest .ia-hint { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.ia-suggest {
  display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px;
  font-size: 15px; font-weight: 800; color: var(--accent-deep);
}
.ia-suggest .btn { min-height: 44px; width: auto; padding: 6px 14px; font-size: 14px; margin-left: auto; }

.spots-alert { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; display: none; }
.spots-alert.warn { display: block; background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange); }
.spots-alert.bad { display: block; background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }

/* ---------------------------------------------------------------- contact accordion */
.edl-head { cursor: pointer; }
.edl-head .eh-row { display: flex; align-items: center; gap: 10px; }
.edl-head .eh-client { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edl-head .eh-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
#contact-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
#contact-panel.hidden { display: none; }

/* mobilier */
.mob-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mob-row .mob-label { flex: 1; font-size: 16px; font-weight: 700; }
.mob-row .stepper { flex: 0 1 190px; min-width: 0; }
.mob-row .stepper button { width: 52px; min-height: 52px; }
.mob-row .stepper input { min-height: 52px; font-size: 19px; }

/* ---------------------------------------------------------------- signature */
.recap-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.recap-line:last-child { border-bottom: none; }
.recap-line .k { color: var(--muted); font-weight: 600; }
.recap-line .v { font-weight: 800; text-align: right; }
.recap-line .v.warn { color: var(--orange); }
.recap-line .v.bad { color: var(--red); }
.recap-line .v.good { color: var(--green); }
.recap-ecarts { margin: 10px 0 0; padding: 10px 12px; background: var(--orange-bg); border-radius: 12px; font-size: 14px; color: var(--orange); }
.recap-ecarts li { margin: 4px 0 4px 16px; padding: 0; }

.sig-block { border-left: 4px solid var(--line); }
.sig-block.signed { border-left-color: var(--green); }
.sig-block.missing { border-left-color: var(--red); }
.sig-block h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 8px; font-size: 18px; }
.sig-block .sig-text { font-size: 14px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.sig-done { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 800; font-size: 15px; min-height: 44px; }

details.reglement { margin-bottom: 12px; }
details.reglement summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent-deep); min-height: 44px; display: flex; align-items: center; }
.reglement-txt {
  max-height: 240px; overflow-y: auto; font-size: 13px; line-height: 1.6;
  color: var(--muted); background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; margin-top: 8px;
}
.reglement-txt h4 { color: var(--txt); margin: 10px 0 4px; font-size: 13px; }

/* signature pad overlay */
.overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(20,20,20,.55);
  display: flex; flex-direction: column;
  padding: calc(12px + var(--safe-t)) 14px calc(14px + var(--safe-b)); overflow-y: auto;
}
.overlay > * { flex-shrink: 0; }
.overlay .ov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.overlay .ov-head h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: #fff; font-size: 19px; margin: 0; flex: 1; }
.overlay .ov-scroll { flex: 1; overflow-y: auto; min-height: 0; }
#sig-canvas { width: 100%; border-radius: 14px; background: #fff; touch-action: none; display: block; }
.sig-mention { text-align: center; font-size: 14px; font-style: italic; color: #e8e6df; margin: 10px 0; }
.sig-actions { display: flex; gap: 10px; margin-top: 10px; }

.ic { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* visionneuse PDF */
.pdf-viewer { position: fixed; inset: 0; z-index: 160; display: flex; flex-direction: column; background: #2a2a2a; }
.pv-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.pv-titles { flex: 1; min-width: 0; text-align: center; }
.pv-t { font-size: 14px; font-weight: 700; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card2); border: 1px solid var(--line); color: var(--txt); cursor: pointer; }
.pv-btn:active { transform: scale(.96); }
.pv-btn.accent { color: var(--accent-deep); border-color: var(--accent); }
.pv-btn.busy { opacity: .5; pointer-events: none; }
.pv-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.pv-doc { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; min-height: 100%; }
.pv-doc.zoomed { align-items: flex-start; }
.pv-canvas { background: #fff; border-radius: 3px; box-shadow: 0 1px 12px rgba(0,0,0,.35); max-width: none; display: block; }
.pv-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 20px; color: #ddd; }
.pv-loading-t { font-size: 14px; }
.pv-fallback { width: 100%; height: 82vh; border: 0; background: #fff; border-radius: 4px; }
.pv-foot { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 8px 12px calc(8px + var(--safe-b)); background: var(--card); border-top: 1px solid var(--line); }
.pv-foot[hidden] { display: none; }
.pv-zoom { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--card2); border: 1px solid var(--line); color: var(--txt); cursor: pointer; }
.pv-zoom:active { transform: scale(.96); }
.pv-page { font-size: 14px; font-weight: 700; color: var(--muted); min-width: 60px; text-align: center; }

/* modal écart */
.modal-box { margin: auto; width: 100%; max-width: 480px; background: var(--card); border: 2px solid var(--red); border-radius: 20px; padding: 20px; box-shadow: var(--sh-pop); }
.modal-box h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; margin: 0 0 10px; font-size: 21px; color: var(--red); }
.modal-box ul { margin: 10px 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.modal-box .modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* sheet (EDL manuel) */
.sheet { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(20,20,20,.4); }
.sheet-box { background: var(--card); border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom: none; padding: 16px 16px calc(20px + var(--safe-b)); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--sh-pop); }
.sheet-box .sheet-scroll { overflow-y: auto; min-height: 0; flex: 1; }
.sheet-box h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; margin: 0 0 14px; font-size: 20px; display: flex; align-items: center; }
.pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pick-item { text-align: left; min-height: 56px; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15px; }
.pick-item .pi-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pick-item.sel { border-color: var(--accent); background: var(--accent-soft); }

/* ---------------------------------------------------------------- done */
.done-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: calc(clamp(24px, 5vh, 56px) + var(--safe-t)) 24px calc(40px + var(--safe-b)); overflow-y: auto; }
.done-check { width: 110px; height: 110px; border-radius: 50%; background: var(--green-bg); border: 3px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--green); margin-bottom: 18px; }
.done-screen h1 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 32px; margin: 0 0 6px; }
.done-screen .sub { color: var(--muted); margin-bottom: 26px; }
.wifi-box { background: var(--card); border: 1px solid var(--accent); border-radius: 18px; padding: 18px 26px; margin-bottom: 26px; width: 100%; max-width: 380px; box-shadow: var(--sh-card); }
.wifi-box .w-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.wifi-box .w-code { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: 2px; color: var(--accent-deep); margin-top: 6px; word-break: break-all; }

.doc-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; }
.file-chip { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 4px; box-shadow: var(--sh-card); }
.file-chip .fc-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-deep); }
.file-chip .fc-txt { min-width: 0; }
.file-chip .fc-name { font-size: 15px; font-weight: 700; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .fc-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row { display: flex; gap: 10px; }
.action-row .btn { flex: 1; }
.done-email { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.done-foot { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; margin-top: 24px; }

.error-box { text-align: center; padding: calc(48px + var(--safe-t)) 20px 48px; color: var(--muted); }
.error-box .btn { max-width: 240px; margin: 18px auto 0; }

.field-sep { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.field-sep .sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--font-ui); }

/* === rappel « à l'entrée » dans une zone de sortie (comparaison) === */
.entree-ref {
  margin: 4px 0 12px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--line);
}
.er-title {
  display: flex; align-items: center; gap: 5px; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 5px;
}
.er-line { font-size: 14px; color: var(--txt); }
.er-line b { color: var(--accent-deep); }
.er-obs { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: flex-start; gap: 5px; }
.er-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.er-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); cursor: zoom-in;
}

/* === validation d'une fiche soumise par un tiers === */
.submitted-banner {
  margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-deep);
  font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px;
}
.badge.avalider { background: var(--accent); color: var(--on-accent); }
.deal-card.to-validate { border-left: 3px solid var(--accent); }

/* === bandeau « mode invité » === */
body.guest #app, body.guest .screen { padding-top: calc(30px + var(--safe-t)); }
body.guest .screen.no-cta { padding-top: calc(38px + var(--safe-t)); }
body.guest::before {
  content: "Galerie Joseph — saisie invité"; position: fixed; inset: 0 0 auto 0; z-index: 95;
  padding: calc(5px + var(--safe-t)) 12px 5px; background: var(--ink); color: var(--on-ink);
  font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .03em;
  border-bottom: 2px solid var(--accent);
}
body.guest #offline-banner { top: calc(28px + var(--safe-t)); }
/* défense en profondeur : si un bloc staff fuit dans le DOM invité, il reste masqué */
body.guest [data-action="logout"],
body.guest [data-action="feedback"],
body.guest [data-action="client-absent"],
body.guest #sig-gj { display: none !important; }