/* Accueil : la journée dessinée comme une conduite, un raccord par rendez-vous */
.hero { background: var(--c2); color: #fff; border-radius: var(--r-lg); padding: 18px 18px 16px; margin: -2px 0 14px; position: relative; overflow: hidden; }
.hero-date { font: 700 44px/0.95 var(--fc); letter-spacing: -.015em; text-transform: capitalize; }
.hero-sub { color: rgba(255,255,255,.72); font-size: 15px; margin-top: 6px; }
.pipe-run { position: relative; margin: 22px -18px 2px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
.pipe-run::-webkit-scrollbar { display: none; }
.pipe-track { position: relative; display: flex; gap: 0; min-width: 100%; padding-top: 4px; }
.pipe-track::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #f39a4a, var(--c1) 45%, #b2560c); }
.stop { position: relative; flex: 1 0 96px; padding-right: 10px; cursor: pointer; background: none; border: none; color: inherit; text-align: left; }
.stop .fit { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--c2); border: 5px solid #f4b47a; display: block; }
.stop.done .fit { background: #f4b47a; border-color: #f4b47a; }
.stop.is-next .fit { background: var(--gas); border-color: #fff; box-shadow: 0 0 0 4px rgba(242,193,46,.35); }
.stop .t { font: 700 20px/1 var(--fc); margin-top: 10px; font-variant-numeric: tabular-nums; }
.stop .w { font-size: 14px; color: rgba(255,255,255,.78); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.stop.done .t, .stop.done .w { opacity: .55; }
.pipe-empty { margin-top: 16px; color: rgba(255,255,255,.75); font-size: 15px; }
.next-rdv { background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.next-rdv .lbl { font-size: 14px; color: var(--gas); font-weight: 600; }
.next-rdv .who { font: 700 22px/1.15 var(--fc); margin-top: 2px; }
.next-rdv .where { font-size: 15px; color: rgba(255,255,255,.75); }
.hero .btns .btn { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; }
.hero .btns .btn-p { background: var(--c1); border-color: var(--c1); }

/* Briefing IA */
.brief { border: 1.5px solid var(--steel); border-left: 5px solid var(--gas); background: var(--paper); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.brief-h { display: flex; align-items: center; gap: 8px; font: 700 18px var(--fc); margin-bottom: 6px; }
.brief p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.brief .btn-sm { min-height: 34px; }
.typing::after { content: '▍'; animation: blink 1s steps(2) infinite; color: var(--c1); }
@keyframes blink { 50% { opacity: 0; } }

/* Progression d'un document */
.pipe { display: flex; gap: 4px; margin: 16px 0 14px; }
.pipe-s { flex: 1; font: 600 14px var(--fc); color: var(--mute); }
.pipe-s .bar { height: 7px; border-radius: 4px; background: var(--steel); margin-bottom: 6px; }
.pipe-s.done .bar { background: var(--c1); } .pipe-s.done { color: var(--ink); }
.pipe-s.cur .bar { background: var(--c1); box-shadow: 0 0 0 3px var(--c1-lt); } .pipe-s.cur { color: var(--c1-dk); }
.pipe-s.ko .bar { background: var(--bad); } .pipe-s.ko { color: var(--bad); }
.next { background: var(--paper); border: 1.5px solid var(--c1); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.next-t { font: 700 19px/1.2 var(--fc); margin-bottom: 10px; }
.doc-head .amount { font: 700 34px/1 var(--fc); font-variant-numeric: tabular-nums; }

/* Éditeur de lignes */
.ln { background: var(--paper); border: 1.5px solid var(--steel); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.ln.ln-t { background: var(--c2); border-color: var(--c2); color: #fff; }
.ln.ln-t .fi { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); font-weight: 600; }
.ln.ln-t select.fi option { color: var(--ink); }
.ln-g { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; gap: 6px; margin-top: 6px; }
.ln-lbl { font-size: 13px; color: var(--mute); padding-left: 2px; }
.ln .fi { min-height: 44px; padding: 8px 10px; }
.ln-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.ln-tot { font: 700 19px var(--fc); font-variant-numeric: tabular-nums; }
.ln-x { border: none; background: var(--bad-lt); color: var(--bad); border-radius: 10px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.ln-x.mv { background: var(--steel-2); color: var(--ink); }
.ln-t .ln-x { background: rgba(255,255,255,.12); color: #fff; }
.add-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.add-row .btn { flex: 1 1 100px; }
.tot { background: var(--c2); color: #fff; border-radius: var(--r); padding: 14px 16px; }
.tot .row { justify-content: space-between; padding: 3px 0; font-size: 15px; }
.tot .money { font-size: 18px; }
.tot .big { font: 700 24px var(--fc); border-top: 1px solid rgba(255,255,255,.2); margin-top: 6px; padding-top: 8px; }
.tot .big .money { font-size: 26px; }
.tot .c1 { color: var(--gas); }
.voice { display: flex; align-items: center; gap: 12px; background: var(--gas-lt); border: 1.5px dashed var(--gas); border-radius: var(--r); padding: 12px 14px; margin: 12px 0; }
.mic { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--c1); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mic.rec { background: var(--bad); animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,49,42,.5); } 100% { box-shadow: 0 0 0 16px rgba(200,49,42,0); } }

/* Planning */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0 16px; }
.wd { text-align: center; padding: 8px 0 7px; border-radius: 10px; background: var(--paper); border: 1.5px solid var(--steel); cursor: pointer; }
.wd .d1 { font-size: 13px; color: var(--mute); font-weight: 600; }
.wd .d2 { font: 700 22px/1.1 var(--fc); }
.wd .dots { height: 6px; display: flex; justify-content: center; gap: 2px; margin-top: 3px; }
.wd .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c1); }
.wd.today .d2 { color: var(--c1-dk); }
.wd.sel { background: var(--c2); border-color: var(--c2); color: #fff; }
.wd.sel .d1 { color: rgba(255,255,255,.7); } .wd.sel .d2 { color: #fff; } .wd.sel .dot { background: var(--gas); }
.rdv-time { font: 700 24px/1 var(--fc); min-width: 62px; font-variant-numeric: tabular-nums; }
.rdv.done { opacity: .55; }
.ty { font: 600 13px var(--fc); padding: 2px 7px; border-radius: 4px; background: var(--steel-2); color: var(--ink-2); }

/* Attestations */
.att-type { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.att-type button { text-align: left; border: 1.5px solid var(--steel); background: var(--paper); border-radius: 12px; padding: 11px 12px; }
.att-type button b { display: block; font: 700 22px/1 var(--fc); color: var(--c1-dk); }
.att-type button span { font-size: 14px; color: var(--ink-2); }
.att-type button.on { border-color: var(--c2); background: var(--c2); color: #fff; }
.att-type button.on b { color: var(--gas); } .att-type button.on span { color: rgba(255,255,255,.85); }
.fs { border: 1.5px solid var(--steel); border-radius: var(--r); background: var(--paper); margin-bottom: 12px; overflow: hidden; }
.fs > summary, .fs-h { list-style: none; padding: 14px 16px; font: 700 19px var(--fc); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fs > summary::-webkit-details-marker { display: none; }
.fs > summary .ico:last-child { margin-left: auto; transition: transform .15s; }
.fs[open] > summary .ico:last-child { transform: rotate(180deg); }
.fs-b { padding: 0 16px 16px; }
.fs.internal { border-style: dashed; background: var(--steel-2); }
.fs.internal > summary { color: var(--ink-2); }
.mes { width: 100%; border-collapse: collapse; font-size: 15px; }
.mes td { padding: 6px 4px; border-top: 1px solid var(--steel); vertical-align: middle; }
.mes td:first-child { font-weight: 500; }
.mes .hint { font-size: 13px; color: var(--mute); }
.mes .fi { min-height: 42px; padding: 7px 9px; width: 100px; }
.verdict { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.verdict label { text-align: center; border: 1.5px solid var(--steel); border-radius: 10px; padding: 12px 6px; font-weight: 600; cursor: pointer; font-size: 15px; }
.verdict input { display: none; }
.verdict label:has(input:checked).v-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.verdict label:has(input:checked).v-warn { background: var(--gas); border-color: var(--gas); color: #3b2d00; }
.verdict label:has(input:checked).v-bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.sig-wrap { border: 1.5px dashed var(--steel); border-radius: 12px; background: #fff; position: relative; }
.sig-wrap canvas { width: 100%; height: 150px; display: block; touch-action: none; }
.sig-wrap .clear { position: absolute; top: 6px; right: 6px; }
.sig-lbl { font-size: 14px; color: var(--mute); margin: 6px 0 10px; }
.due { font: 600 14px var(--fc); }
.due.late { color: var(--bad); } .due.soon { color: var(--gas-ink); } .due.ok { color: var(--ok); }

/* Chantiers et photos */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(5, 1fr); } }
.ph { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--steel); border: none; padding: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .sel-mark { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: #fff; }
.ph.picked { outline: 4px solid var(--c1); outline-offset: -4px; }
.ph.picked .sel-mark { background: var(--c1); }
.ph .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); text-align: left; }
.ch-cover { height: 132px; border-radius: var(--r) var(--r) 0 0; background: var(--c2) center/cover; position: relative; }
.ch-cover .bdg { position: absolute; top: 10px; left: 10px; }
.viewer { position: fixed; inset: 0; z-index: 400; background: rgba(5,15,25,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.viewer img { max-width: 100%; max-height: 78vh; border-radius: 8px; }
.viewer .btns { width: 100%; max-width: 480px; }
.fb-prev { border: 1px solid var(--steel); border-radius: 12px; overflow: hidden; background: #fff; }
.fb-prev .fb-h { display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.fb-prev .fb-av { width: 40px; height: 40px; border-radius: 50%; background: var(--c2); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 15px var(--fc); overflow: hidden; }
.fb-prev .fb-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.fb-prev .fb-t { padding: 0 12px 10px; font-size: 15px; white-space: pre-wrap; }
.fb-prev .fb-img { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fb-prev .fb-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fb-prev .fb-img img:only-child { grid-column: span 2; aspect-ratio: 4/3; }
.fb-prev .fb-img img:first-child:nth-last-child(3) { grid-column: span 2; aspect-ratio: 2/1; }

/* Code d'accès */
#pin { position: fixed; inset: 0; z-index: 500; background: var(--c2); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 18px; }
#pin.off { display: none; }
.pin-name { font: 700 34px var(--fc); }
.pin-dots { display: flex; gap: 16px; }
.pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.pin-dots span.f { background: var(--gas); border-color: var(--gas); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 78px); gap: 14px; }
.pin-pad button { height: 78px; border-radius: 22px; border: none; background: rgba(255,255,255,.1); color: #fff; font: 600 30px var(--fc); }
.pin-pad button:active { background: rgba(255,255,255,.22); }
.pin-err { color: #ffb4ae; min-height: 20px; font-size: 15px; }

/* Paramètres */
.swatch { width: 54px; height: 54px; border-radius: 12px; border: 1.5px solid var(--steel); padding: 0; background: none; }
.logo-prev { width: 140px; height: 86px; border: 1.5px dashed var(--steel); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--mute); font-size: 14px; overflow: hidden; background: #fff; padding: 6px; }
.logo-prev img { max-width: 100%; max-height: 100%; }
.avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--c1-lt); color: var(--c1-dk); display: flex; align-items: center; justify-content: center; font: 700 18px var(--fc); flex-shrink: 0; }

/* Assistant vocal */
.chat { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 96px; }
.bub { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.bub.me { align-self: flex-end; background: var(--c2); color: #fff; border-bottom-right-radius: 4px; }
.bub.me.live { opacity: .7; border: 1.5px dashed rgba(255,255,255,.6); }
.bub.ai { align-self: flex-start; background: var(--paper); border: 1.5px solid var(--steel); border-bottom-left-radius: 4px; }
.as-card { align-self: stretch; background: var(--paper); border: 1.5px solid var(--c1); border-left-width: 5px; border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.as-card.ok { border-color: var(--ok); }
.as-card.no { border-color: var(--steel); opacity: .65; }
.as-act { display: flex; gap: 10px; align-items: flex-start; }
.as-act > .ico { margin-top: 2px; color: var(--c1); flex-shrink: 0; }
.as-empty { display: grid; gap: 8px; }
.as-ex { text-align: left; background: var(--paper); border: 1.5px dashed var(--steel); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.as-ex:hover { border-color: var(--c1); }
.as-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--bg); border-top: 1px solid var(--steel); z-index: 20; }
.as-bar .fi { flex: 1; margin: 0; }
.as-mic { width: 64px; height: 64px; }
.as-mic .ico { width: 28px; height: 28px; }
@media (min-width: 900px) { .as-bar { left: 224px; bottom: 0; } .chat { margin-bottom: 110px; } }
.prow.rdv.propose { background: repeating-linear-gradient(135deg, transparent 0 10px, var(--gas-lt) 10px 20px); }
.top-btn.top-assist { background: var(--c1); }

/* Éditeur des modèles d'attestation */
.am-list { display: grid; gap: 10px; }
.am-row { padding-bottom: 10px; border-bottom: 1px solid var(--steel); }
.am-two { display: grid; grid-template-columns: 1fr 130px; gap: 6px; }
.am-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.am-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border: 1.5px solid var(--steel); border-radius: 9px; font-size: 14px; cursor: pointer; background: var(--paper); }
.am-tg input { width: 18px; height: 18px; accent-color: var(--c1); }
.am-tg.on { border-color: var(--c1); background: var(--c1-lt); }
.icon-btn.sm { width: 40px; height: 40px; border-radius: 10px; }
.icon-btn:disabled { opacity: .35; }

/* Visionneuse PDF intégrée */
#pv { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: #3b4754; }
body.pv-open { overflow: hidden; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--c2); color: #fff; }
.pv-t { flex: 1; min-width: 0; line-height: 1.25; }
.pv-t .small { color: rgba(255,255,255,.75); }
.pv-btn { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 24px/1 var(--f); }
.pv-btn:disabled { opacity: .35; }
.pv-btn:focus-visible { outline: 3px solid var(--gas); outline-offset: 1px; }
.pv-body { flex: 1; overflow: auto; scrollbar-gutter: stable; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.pv-pages { margin: 0 auto; display: grid; gap: 12px; }
.pv-pages canvas { display: block; background: #fff; border-radius: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pv-wait { color: #fff; text-align: center; padding: 48px 16px; font-size: 16px; }
@media (max-width: 420px) { .pv-btn { width: 42px; height: 42px; } }

/* Rappels et relances */
.rem-card .avatar { flex-shrink: 0; }
.rem-txt { margin-top: 8px; border: 1px dashed var(--steel); border-radius: 10px; padding: 8px 10px; background: var(--steel-2); }
.rem-txt summary { cursor: pointer; color: var(--ink-2); font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.rem-txt > div { margin-top: 6px; line-height: 1.5; }

/* Indicateur de synchronisation (en-tête) */
#btn-sync { width: 40px; }
.sync-dot, .sync-big { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--gas); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.sync-big { width: 18px; height: 18px; box-shadow: none; flex-shrink: 0; }
.sync-ok .sync-dot, .sync-big.sync-ok { background: #2ecc71; }
.sync-busy .sync-dot, .sync-big.sync-busy, .sync-off .sync-dot, .sync-big.sync-off { background: var(--gas); }
.sync-err .sync-dot, .sync-big.sync-err { background: #e74c3c; }
.sync-busy .sync-dot { animation: syncpulse 1.2s ease-in-out infinite; }
@keyframes syncpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sync-busy .sync-dot { animation: none; } }
.sync-lock .sync-dot, .sync-big.sync-lock, .sync-cfg .sync-dot, .sync-big.sync-cfg { background: #9aa7b4; }
.qr-box { background: #fff; border-radius: 12px; padding: 12px; width: min(280px, 100%); margin: 0 auto; }
.qr-box svg { display: block; width: 100%; height: auto; }