*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.2}
h1{font-size:1.75rem} h2{font-size:1.25rem} h3{font-size:1.05rem} h4{font-size:.95rem}
p{margin:0}
small,.muted{color:var(--ink-3)}
.muted-2{color:var(--ink-3)}
strong{font-weight:600}
button{font-family:inherit}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:20px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--sh-brand)}
.brand .logo svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:12px 10px 4px;font-weight:700}
.nav a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.nav a.active{background:var(--brand-soft);color:var(--brand-2);font-weight:600}
.nav a svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav .count{margin-left:auto;background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill)}
.nav .count.neutral{background:var(--line);color:var(--ink-2)}
.sidebar .spacer{flex:1}
.plan-card{margin:8px 4px 0;padding:14px;border-radius:var(--r-md);background:linear-gradient(160deg,var(--brand-tint),#fff);border:1px solid var(--line)}
.plan-card .bar{height:6px;border-radius:99px;background:var(--line);margin:10px 0 8px;overflow:hidden}
.plan-card .bar i{display:block;height:100%;width:36%;background:linear-gradient(90deg,var(--brand),var(--brand-3));border-radius:99px}
.main{min-width:0}
.topbar{height:var(--topbar-h);background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20}
.topbar .crumbs{color:var(--ink-3);font-size:.9rem}
.topbar .crumbs b{color:var(--ink);font-weight:600}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;width:320px;color:var(--ink-3);transition:box-shadow var(--t),border-color var(--t)}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(31,79,160,.12);background:#fff}
.search svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search input{border:0;background:transparent;outline:0;font:inherit;width:100%;color:var(--ink)}
.search kbd{font-family:var(--mono);font-size:.7rem;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink-3)}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.icon-btn:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.85rem;box-shadow:var(--sh-1)}
.avatar.sm{width:28px;height:28px;font-size:.7rem}
.avatar.blue{background:linear-gradient(135deg,var(--brand-3),var(--brand))}
.avatar.green{background:linear-gradient(135deg,var(--proof-2),var(--proof))}
.avatar.grey{background:linear-gradient(135deg,var(--gris-1),var(--gris-2))}
.content{padding:28px;max-width:1440px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head .sub{color:var(--ink-3);margin-top:4px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;font-size:.92rem;cursor:pointer;background:var(--surface);color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t),border-color var(--t);white-space:nowrap;text-decoration:none!important;line-height:1.2}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(31,79,160,.3)}
.btn-primary:hover{background:var(--brand-2);box-shadow:var(--sh-brand)}
.btn-secondary{border-color:var(--line);background:#fff}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--surface-2);box-shadow:none}
.btn-proof{background:var(--proof);color:#fff}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-sm{padding:7px 12px;font-size:.84rem;border-radius:8px}
.btn-lg{padding:14px 22px;font-size:1rem;border-radius:12px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.card.hover:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 0}
.card-b{padding:18px 22px 22px}
.card-f{padding:14px 22px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.card-title{display:flex;align-items:center;gap:10px}
.card-title .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.card-title .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-title .ic.proof{background:var(--proof-soft);color:var(--proof)}
.card-title .ic.warn{background:var(--warn-soft);color:var(--warn)}
.card-title .ic.danger{background:var(--danger-soft);color:var(--danger)}
.card-title .ic.info{background:var(--info-soft);color:var(--info)}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-2{margin-bottom:16px}
.kpi{padding:20px 22px}
.kpi .label{font-size:.82rem;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi .value{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.kpi .delta{font-size:.84rem;margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);background:var(--proof-soft);color:var(--proof);font-weight:600}
.kpi .delta.warn{background:var(--warn-soft);color:var(--warn)}
.kpi .delta.danger{background:var(--danger-soft);color:var(--danger-ink)}
.kpi .delta.neutral{background:var(--line-2);color:var(--ink-3)}
.ring{--p:82;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--proof) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;position:relative}
.ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.ring b{position:relative;z-index:1;font-size:1.8rem;font-weight:800;letter-spacing:-.03em}
.ring small{position:relative;z-index:1;font-size:.58rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:-6px;max-width:74px;text-align:center;line-height:1.1}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;line-height:1.4;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--proof-soft);color:var(--proof-ink)}
.badge.warn{background:var(--warn-soft);color:var(--warn-ink-2)}
.badge.danger{background:var(--danger-soft);color:var(--danger-ink)}
.badge.info{background:var(--info-soft);color:var(--info-ink)}
.badge.brand{background:var(--brand-soft);color:var(--brand)}
.badge.neutral{background:var(--line-2);color:var(--ink-2)}
.badge.plain::before{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:.84rem;font-weight:500;cursor:pointer;transition:all var(--t)}
.chip:hover{border-color:var(--ink-4)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.task{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t)}
.task:hover{box-shadow:var(--sh-2);transform:translateX(2px);border-color:var(--line-hover)}
.task .sev{width:4px;align-self:stretch;border-radius:4px;background:var(--line)}
.task.danger .sev{background:var(--danger)} .task.warn .sev{background:var(--warn)} .task.info .sev{background:var(--info)} .task.ok .sev{background:var(--proof)}
.task .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-2)}
.task.danger .ico{background:var(--danger-soft);color:var(--danger)} .task.warn .ico{background:var(--warn-soft);color:var(--warn)} .task.info .ico{background:var(--info-soft);color:var(--info)} .task.ok .ico{background:var(--proof-soft);color:var(--proof)}
.task .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.task .body{flex:1;min-width:0}
.task .body b{display:block;font-weight:600}
.task .body span{color:var(--ink-3);font-size:.88rem}
.task .cta{flex:none}
.task.done{opacity:.55}
.task.done .body b{text-decoration:line-through}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0}
.table td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:var(--brand-tint)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .who{display:flex;align-items:center;gap:10px}
.table-wrap{overflow:auto;border-radius:var(--r-lg)}
.table .th-r{text-align:right}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:.8rem;color:var(--ink-3)}
.input,.select,.textarea{width:100%;font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:border-color var(--t),box-shadow var(--t)}
.input:hover,.select:hover{border-color:var(--line-champ)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(31,79,160,.12)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 4px rgba(179,38,30,.12)}
.err-msg{font-size:.8rem;color:var(--danger)}
.input-group{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.input-group .input{border:0;border-radius:0}
.input-group .addon{padding:0 14px;color:var(--ink-3);background:var(--surface-2);align-self:stretch;display:grid;place-items:center;border-left:1px solid var(--line);font-weight:600}
.toggle{position:relative;width:44px;height:26px;border-radius:99px;background:var(--line);cursor:pointer;transition:background var(--t);flex:none;border:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t) var(--ease)}
.toggle.on{background:var(--proof)} .toggle.on::after{transform:translateX(18px)}
.check{display:flex;align-items:center;gap:10px;font-size:.92rem}
.check i{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;background:#fff;color:#fff;transition:all var(--t)}
.check.on i{background:var(--brand);border-color:var(--brand)}
.check i svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.radio-card{display:flex;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:all var(--t);background:#fff}
.radio-card:hover{border-color:var(--line-champ);box-shadow:var(--sh-1)}
.radio-card.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 3px rgba(31,79,160,.12)}
.radio-card .r{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:2px;position:relative}
.radio-card.on .r{border-color:var(--brand)} .radio-card.on .r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a{padding:10px 16px;color:var(--ink-3);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t),border-color var(--t)}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.active,.tabs a.on{color:var(--brand);border-color:var(--brand)}
.seg{display:inline-flex;background:var(--line-2);padding:4px;border-radius:var(--r-sm);gap:2px}
.seg a{padding:7px 14px;border-radius:8px;color:var(--ink-3);font-weight:600;font-size:.86rem;transition:all var(--t)}
.seg a.active{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.seg a:hover{text-decoration:none;color:var(--ink)}
.steps{display:flex;gap:0;align-items:center;margin-bottom:28px}
.steps .st{display:flex;align-items:center;gap:10px;flex:1;position:relative}
.steps .st .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--line-2);color:var(--ink-3);border:2px solid transparent;flex:none;transition:all var(--t)}
.steps .n svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.steps .st.done .n{background:var(--proof);color:#fff}
.steps .st.cur .n{background:#fff;border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(31,79,160,.12)}
.steps .st span{font-size:.88rem;font-weight:600;color:var(--ink-3)}
.steps .st.cur span{color:var(--ink)}
.steps .st::after{content:"";flex:1;height:2px;background:var(--line);margin:0 14px}
.steps .st.done::after{background:var(--proof)}
.steps .st:last-child::after{display:none}
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding:0 0 22px}
.tl .ev::before{content:"";position:absolute;left:-24px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 3px #fff}
.tl .ev.proof::before{border-color:var(--proof)} .tl .ev.warn::before{border-color:var(--warn)} .tl .ev.grey::before{border-color:var(--ink-4)}
.tl .ev time{font-size:.78rem;color:var(--ink-3);font-family:var(--mono)}
.tl .ev b{display:block;font-weight:600;margin-top:2px}
.tl .ev p{color:var(--ink-3);font-size:.9rem}
.hash{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
.seal{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--proof-soft);color:var(--proof-ink);font-weight:700;font-size:.85rem}
.seal svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);border:1px solid;align-items:flex-start}
.alert svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.alert.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink)}
.alert.info{background:var(--info-soft);border-color:var(--info-line);color:var(--info-ink)}
.alert.ok{background:var(--proof-soft);border-color:var(--proof-line);color:var(--proof-ink)}
.alert.danger{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}
.alert b{font-weight:700}
.thread{display:flex;flex-direction:column;gap:14px}
.msg{max-width:78%;padding:12px 16px;border-radius:16px;box-shadow:var(--sh-1);position:relative;font-size:.94rem}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg .meta{display:block;font-size:.72rem;opacity:.75;margin-top:6px;font-family:var(--mono)}
.msg.sys{align-self:center;background:var(--line-2);color:var(--ink-3);font-size:.8rem;padding:6px 14px;border-radius:99px;box-shadow:none}
.composer{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 16px;background:#fff;box-shadow:var(--sh-1)}
.composer input{border:0;flex:1;font:inherit;outline:0}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ph{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,var(--ph-1),var(--ph-2));position:relative;overflow:hidden;border:1px solid var(--line);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.ph:hover{transform:scale(1.02);box-shadow:var(--sh-2)}
.ph::after{content:attr(data-t);position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:.66rem;background:rgba(15,23,42,.75);color:#fff;padding:2px 7px;border-radius:6px}
.ph.add{background:#fff;border:2px dashed var(--line);display:grid;place-items:center;color:var(--ink-3);font-weight:600;font-size:.85rem}
.ph.add::after{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:90;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms var(--ease),visibility 0s linear 200ms}
.modal-bg.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 200ms var(--ease),visibility 0s}
.modal-bg.closing{opacity:0;transition:opacity 180ms var(--ease)}
.modal{width:min(560px,92vw);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);transform:translateY(16px) scale(.97);opacity:.6;transition:transform 260ms cubic-bezier(.2,.8,.2,1),opacity 200ms;overflow-y:auto;overscroll-behavior:contain}
.modal>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow-y:auto}
.modal .m-h,.modal .m-f{flex:none}
.modal-bg.open .modal{transform:none;opacity:1}
.modal-bg.closing .modal{transform:translateY(8px) scale(.98);opacity:0;transition:transform 180ms var(--ease),opacity 160ms}
html.modale-ouverte,html.modale-ouverte body{overflow:hidden}
.modal .m-h{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:center}
.modal .m-b{padding:16px 24px 24px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal .m-f{padding:14px 24px;background:var(--surface-2);border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:10px}
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:100}
.toast{position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;background:var(--ink);color:#fff;padding:12px 10px 12px 16px;border-radius:12px;box-shadow:var(--sh-3);min-width:300px;max-width:440px;animation:toast-in 320ms cubic-bezier(.2,.9,.25,1.15)}
.toast.sortie{animation:toast-out 220ms var(--ease) forwards}
.toast-texte{flex:1;font-size:.9rem;line-height:1.4}
.toast-x{flex:none;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1;cursor:pointer;transition:background var(--t),color var(--t)}
.toast-x:hover{background:rgba(255,255,255,.12);color:#fff}
.toast-barre{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.35);transform-origin:left;animation:toast-temps linear forwards}
.toast.pause .toast-barre{animation-play-state:paused}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(18px)}}
@keyframes toast-temps{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast i{width:10px;height:10px;border-radius:50%;background:var(--proof);flex:none}
.toast.warn i{background:var(--warn)}
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.dd{position:relative}
.dd-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);min-width:220px;padding:6px;display:none;z-index:30}
.dd.open .dd-menu{display:block;animation:up 160ms var(--ease)}
.dd-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-size:.9rem}
.dd-menu a:hover{background:var(--surface-2);text-decoration:none}
.dd-menu hr{border:0;border-top:1px solid var(--line-2);margin:6px 0}
.skeleton{background:linear-gradient(90deg,var(--line-2) 25%,#fff 50%,var(--line-2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width 500ms var(--ease)}
.progress.ok i{background:var(--proof)} .progress.warn i{background:var(--warn)}
.site{background:#fff}
.site-nav{display:flex;align-items:center;gap:32px;padding:18px 6vw;max-width:1280px;margin:0 auto}
.site-nav .links{display:flex;gap:26px;margin-left:12px}
.site-nav .links a{color:var(--ink-2);font-weight:500}
.site-nav .right{margin-left:auto;display:flex;gap:10px}
.hero{padding:70px 6vw 60px;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:3.1rem;letter-spacing:-.035em;line-height:1.08}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:1.15rem;color:var(--ink-3);margin:22px 0 30px;max-width:540px}
.hero-visual{position:relative}
.hero-visual .frame{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-3);padding:18px;transform:rotate(-1deg)}
.hero-visual .float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:12px 16px;font-size:.88rem;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;color:var(--ink-3);font-size:.9rem}
.trust span{display:flex;align-items:center;gap:8px}
.trust svg{width:16px;height:16px;stroke:var(--proof);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.section{padding:70px 6vw;max-width:1280px;margin:0 auto}
.section.alt{max-width:none;background:var(--bg)}
.section.alt>div{max-width:1280px;margin:0 auto;padding:0}
.eyebrow{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.section h2{font-size:2.1rem;letter-spacing:-.03em;margin:10px 0 12px}
.section .sub{color:var(--ink-3);font-size:1.08rem;max-width:640px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.pillar{padding:26px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.pillar .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-bottom:16px}
.pillar .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--ink-3);font-size:.95rem}
.pricing{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;align-items:stretch}
.price{padding:22px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:14px;position:relative}
.price.featured{border-color:var(--brand);box-shadow:var(--sh-brand);transform:scale(1.03)}
.price .tag{position:absolute;top:-13px;left:24px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase}
.price .amount{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.price .amount small{font-size:1rem;color:var(--ink-3);font-weight:500;letter-spacing:0}
.price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;color:var(--ink-2);font-size:.94rem}
.price li{display:flex;gap:10px;align-items:flex-start}
.price li svg{width:16px;height:16px;flex:none;stroke:var(--proof);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.price .cta{margin-top:auto}
.footer{padding:40px 6vw;border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem;display:flex;justify-content:space-between;max-width:1280px;margin:0 auto;flex-wrap:wrap;gap:12px}
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.auth .pane{background:var(--grad-sombre);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between}
.auth .pane h2{font-size:2rem;letter-spacing:-.03em;max-width:460px}
.auth .pane .quote{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:22px;max-width:480px;backdrop-filter:blur(8px)}
.auth .form{display:grid;place-items:center;padding:40px}
.auth .box{width:min(440px,100%)}
.tenant .sidebar{background:#fff}
.tenant .brand .logo{background:var(--grad-brand);box-shadow:var(--sh-brand)}
.tenant .nav a.active{background:var(--proof-soft);color:var(--proof-ink)}
.admin .sidebar{background:var(--side-bg);border-color:var(--side-line)}
.admin .sidebar .brand{color:#fff}
.admin .nav a{color:var(--side-ink-3)}
.admin .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.admin .nav a.active{background:rgba(255,255,255,.12);color:#fff}
.admin .nav-section{color:var(--side-mute)}
.admin .brand .badge{background:rgba(255,255,255,.16);color:#fff}
.admin .plan-card{background:rgba(255,255,255,.06);border-color:var(--side-plan-line);color:var(--side-ink-3)}
.admin .sidebar .spacer+.plan-card b{color:#fff}
.row>svg,li>svg{width:18px;height:18px;flex:none;stroke:var(--proof);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:10px}
.bars div{flex:1;background:var(--brand-soft);border-radius:8px 8px 3px 3px;position:relative;transition:background var(--t)}
.bars div:hover{background:var(--brand)}
.bars div.cur{background:var(--brand)}
.bars div::after{content:attr(data-l);position:absolute;top:100%;left:0;right:0;text-align:center;font-size:.72rem;color:var(--ink-3);margin-top:6px}
.doc{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:all var(--t)}
.doc:hover{box-shadow:var(--sh-2);border-color:var(--line-hover)}
.doc .ft{width:38px;height:44px;border-radius:8px;background:var(--danger-soft);color:var(--danger);display:grid;place-items:center;font-size:.62rem;font-weight:800;font-family:var(--mono);flex:none}
.doc .ft.img{background:var(--info-soft);color:var(--info)}
.doc .ft.sig{background:var(--proof-soft);color:var(--proof)}
.doc b{display:block;font-size:.9rem;font-weight:600}
.doc small{font-size:.78rem}
.split{display:grid;grid-template-columns:340px 1fr;gap:20px}
.list-item{display:flex;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background var(--t);border:1px solid transparent}
.list-item:hover{background:var(--surface-2)}
.list-item.active{background:var(--brand-tint);border-color:var(--brand-line)}
.list-item .t{flex:1;min-width:0}
.list-item .t b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .t span{font-size:.82rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pill-nav{display:flex;gap:8px;flex-wrap:wrap}
.tooltip{position:relative}
.tooltip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 10px;border-radius:8px;font-size:.76rem;white-space:nowrap;box-shadow:var(--sh-2);z-index:50}
.empty{text-align:center;padding:40px 20px;color:var(--ink-3)}
.empty .big{font-size:2.4rem;margin-bottom:8px}
.code{font-family:var(--mono);font-size:.82rem;background:var(--ink);color:var(--code-ink);padding:14px 16px;border-radius:12px;overflow:auto}
.sparkline{height:36px;display:flex;align-items:flex-end;gap:3px}
.sparkline i{flex:1;background:var(--proof);opacity:.5;border-radius:2px}
@media (max-width:1100px){
.g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)}
.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
.hero{grid-template-columns:1fr} .pillars{grid-template-columns:repeat(2,1fr)} .pricing{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
.app{grid-template-columns:1fr} .sidebar{display:none} .g-4,.g-3,.g-2{grid-template-columns:1fr}
.search{display:none} .content{padding:16px} .split{grid-template-columns:1fr} .auth{grid-template-columns:1fr} .auth .pane{display:none}
}
@media print{.sidebar,.topbar,.toasts{display:none} .app{display:block}}
.topbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.sidebar{scrollbar-width:thin;scrollbar-color:transparent transparent}
.sidebar:hover{scrollbar-color:var(--line) transparent}
.nav-bouton{display:none}
.nav-fond{display:none}
.dd-menu form{margin:0}
.dd-item{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-size:.9rem}
.dd-item:hover{background:var(--surface-2);color:var(--ink)}
.check-input{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;cursor:pointer}
.check-input input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand);flex:none}
.err-msg{display:block}
[hidden]{display:none !important}
.toasts .toast.ok i{background:var(--proof)}
.toasts .toast.danger i{background:var(--danger)}
.toasts .toast.warn i{background:var(--warn)}
.code{white-space:pre-wrap;word-break:break-all;line-height:1.7}
.empty .big svg{width:40px;height:40px;stroke:var(--ink-4);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn[aria-busy="true"],.btn:disabled{opacity:.6;pointer-events:none}
.table td .badge{white-space:nowrap}
@media (max-width:800px){
.nav-bouton{display:grid}
.app.nav-open .nav-fond{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40}
.app.nav-open .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);height:100dvh;z-index:50;box-shadow:var(--sh-3)}
.toasts{display:flex;left:12px;right:12px;bottom:12px}
.toast{min-width:0}
.page-head{flex-direction:column;align-items:flex-start;gap:12px}
.grid.g-3,.grid.g-2{grid-template-columns:1fr}
.modal-bg{align-items:flex-end}
.modal{width:100vw;max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px);border-radius:16px 16px 0 0}
.modal .m-h{padding:16px 16px 0}
.modal .m-b{padding:12px 16px 16px}
.modal .m-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
.modal .m-f .btn{flex:1 1 auto}
.modal-bg.dialogue{align-items:center}
.modal-bg.dialogue .modal{border-radius:var(--r-lg)}
}
.content{margin-left:auto;margin-right:auto}
input[type=file].input{padding:8px 10px;cursor:pointer}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.86rem;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:8px;padding:6px 12px;margin-right:12px;cursor:pointer;transition:background var(--t)}
input[type=file]::file-selector-button:hover{background:var(--line-2)}
.task .row form{margin:0}
.dd-menu form{margin:0}
.dd-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-size:.9rem;background:none;border:0;cursor:pointer;font:inherit}
.dd-item:hover{background:var(--line-2)}
.radio-card{position:relative}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card:has(input:checked){border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 3px rgba(31,79,160,.12)}
.radio-card:has(input:checked) .r{border-color:var(--brand)}
.radio-card:has(input:checked) .r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand)}
.radio-card:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.radio-card .r{position:relative}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field legend.label{font-weight:600;font-size:.88rem;margin-bottom:6px;padding:0}
[data-si][hidden]{display:none!important}
.check-ligne{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;cursor:pointer}
.check-ligne input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.estompe{opacity:.6}
.list-item .count{margin-left:6px}
.liste-demandes{overflow:auto}
.detail-demande .fil{overflow:auto;background:var(--surface-2)}
.fil{display:flex;flex-direction:column;gap:14px}
.msg .pieces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg .piece{display:inline-flex;align-items:center;gap:6px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.06);color:inherit;font-size:.8rem;max-width:100%}
.msg .piece img{display:block;width:96px;height:96px;object-fit:cover}
.msg .piece span{padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.msg .piece svg{width:18px;height:18px;margin-left:8px}
.composer-form .textarea{min-height:64px}
.vide{text-align:center;padding:48px 24px}
.h-petit{font-size:1rem;margin:0}
body.public{background:linear-gradient(160deg,var(--bg),var(--brand-soft));min-height:100vh}
.public-cadre{max-width:560px;margin:0 auto;padding:28px 16px 40px}
.public-marque{justify-content:center;margin-bottom:18px}
.public-carte{overflow:hidden}
.public-tete{background:linear-gradient(135deg,var(--ink),var(--nuit));color:#fff;padding:22px}
.public-tete .badge{background:rgba(255,255,255,.14);color:#fff}
.public-tete h1{color:#fff;margin-top:10px;font-size:1.35rem}
.public-tete p{color:var(--side-ink-3);margin-top:4px}
.public-pied{font-size:.82rem;text-align:center;margin-top:12px}
.public .fil{max-height:none;background:var(--surface-2)}
body.impression{background:#fff}
.barre-impression{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.affiche-qr{max-width:600px;margin:24px auto;padding:32px;text-align:center;border:2px solid var(--ink);border-radius:24px}
.affiche-qr .brand{justify-content:center}
.affiche-qr h1{font-size:1.6rem;margin:18px 0 6px}
.affiche-qr .adresse{font-weight:600;font-size:1.1rem}
.affiche-qr .code svg{width:320px;height:320px;max-width:100%;margin:18px auto;display:block}
.affiche-qr .actions-qr{list-style:none;padding:0;margin:0 auto 14px;display:inline-block;text-align:left}
.affiche-qr .actions-qr li{padding:4px 0 4px 22px;position:relative}
.affiche-qr .actions-qr li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.affiche-qr .lien{font-family:var(--mono);font-size:.78rem;word-break:break-all;color:var(--ink-3)}
.affiche-qr .pied{font-size:.82rem;color:var(--ink-3)}
@media print{.barre-impression{display:none}.affiche-qr{margin:0 auto;border-width:1.5px}}
.etape-tete{display:flex;align-items:center;gap:12px}
.etape-tete h2{font-size:1.05rem;margin:0}
.etape-num{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--line-2);color:var(--ink-2);flex:none}
.etape-num.fait{background:var(--proof);color:#fff}
.etape-num svg{width:16px;height:16px}
.radio-card.compact{padding:8px 12px;align-items:center}
.lien-resume{cursor:pointer;color:var(--brand);font-weight:600;font-size:.9rem}
.code-input{font-family:var(--mono);font-size:1.5rem;letter-spacing:.4em;text-align:center}
.ligne-decompte{box-shadow:none;border:1px solid var(--line)}
fieldset[disabled]{opacity:.75}
fieldset.edl{border:0;padding:0;margin:0;min-width:0}
.piece-edl .card-h{gap:8px}
.titre-piece{font-weight:700;font-size:1rem;border-color:transparent;background:transparent;max-width:420px}
.titre-piece:focus,.nom-element:focus{border-color:var(--line);background:#fff}
.element-edl{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.element-edl.degrade{border-color:var(--danger);background:var(--danger-soft)}
.nom-element{font-weight:600;border-color:transparent;background:transparent;max-width:320px;flex:1}
.etats{display:flex;gap:4px;flex-wrap:wrap}
.etat-choix{position:relative;cursor:pointer}
.etat-choix input{position:absolute;opacity:0;pointer-events:none}
.etat-choix span{display:inline-block;padding:6px 10px;border:1.5px solid var(--line);border-radius:99px;font-size:.8rem;background:#fff}
.etat-choix input:checked+span{color:#fff;border-color:transparent}
.etat-neuf input:checked+span{background:var(--proof)}
.etat-bon input:checked+span{background:var(--info)}
.etat-usage input:checked+span{background:var(--warn)}
.etat-degrade input:checked+span{background:var(--danger)}
.etat-choix input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.photos-edl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vignette{position:relative;display:inline-block;border-radius:8px;overflow:hidden;background:var(--line-2)}
.vignette img{display:block;width:84px;height:84px;object-fit:cover}
.vignette form{position:absolute;top:2px;right:2px;margin:0}
.vignette .icon-btn{background:rgba(255,255,255,.9);width:24px;height:24px}
.vignette.entree{outline:2px dashed var(--ink-4)}
.vignette.entree span{position:absolute;left:0;right:0;bottom:0;background:rgba(15,23,42,.7);color:#fff;font-size:.65rem;text-align:center}
.ajout-photo{margin:0}
.pad-signature{border:1.5px dashed var(--line);border-radius:12px;background:#fff;padding:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pad-signature canvas{width:100%;height:auto;aspect-ratio:600/220;touch-action:none;cursor:crosshair;display:block}
.liste-signataires{margin:0;padding-left:18px}
.input-montant{max-width:110px}
.piece-public{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.piece-public summary{cursor:pointer}
.element-public{border-top:1px solid var(--line-2);padding-top:8px}
.input.err{border-color:var(--danger)}
.carte-intervention{border-bottom:1px solid var(--line);background:var(--brand-tint)}
.edition-ligne summary{list-style:none}
.edition-ligne[open]{min-width:420px;text-align:left}
.liste-simple{margin:6px 0 0;padding-left:18px}
@media (max-width:720px){.recherche-globale{display:none}}
/* ---- Barre latérale sombre et fine (espace bailleur, admin) --------------------------------------- */
.sidebar{background:var(--side-bg);border-right:1px solid var(--side-line);padding:16px 12px}
.sidebar .brand{color:var(--side-ink-2);font-size:1.05rem;padding:6px 8px 14px}
.sidebar .brand .logo{box-shadow:none}
.sidebar .nav-section{color:var(--side-section);padding:12px 10px 4px}
.sidebar .nav a{color:var(--side-ink);padding:7px 10px;font-size:.9rem}
.sidebar .nav a:hover{background:rgba(255,255,255,.06);color:var(--side-ink-2)}
.sidebar .nav a.active{background:var(--side-active);color:#fff;font-weight:600}
.sidebar .nav a.active svg{color:var(--brand-4)}
.sidebar .row b,.sidebar .row small{color:var(--side-ink-2)} .sidebar .row small{color:var(--side-ink)}
.sidebar .plan-card{background:rgba(255,255,255,.05);border-color:var(--side-line);color:var(--side-ink)}
.sidebar .plan-card b{color:var(--side-ink-2)}
.topbar{background:rgba(255,255,255,.88);padding:0 24px}
.content{padding:24px 28px 40px}
/* ---- Transitions de page, apparition en fondu ----------------------------------------------------- */
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.content>*{animation:fade-up var(--t-slow) var(--ease) backwards}
.content>*:nth-child(2){animation-delay:40ms}.content>*:nth-child(3){animation-delay:80ms}.content>*:nth-child(4){animation-delay:120ms}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- Palette de commandes (Ctrl+K) ---------------------------------------------------------------- */
.palette-bg{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(3px);z-index:95;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;opacity:0;transition:opacity 180ms}
.palette-bg.open{display:flex;opacity:1}
.palette{width:min(640px,94vw);background:#fff;border-radius:16px;box-shadow:var(--sh-3);overflow:hidden;transform:translateY(-8px) scale(.98);transition:transform 200ms var(--ease)}
.palette-bg.open .palette{transform:none}
.palette input{width:100%;border:0;outline:0;font:inherit;font-size:1.05rem;padding:18px 20px;border-bottom:1px solid var(--line)}
.palette ul{list-style:none;margin:0;padding:8px;max-height:52vh;overflow:auto}
.palette li{padding:10px 12px;border-radius:10px;display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--ink-2)}
.palette li svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.palette li.on,.palette li:hover{background:var(--brand-soft);color:var(--brand-ink)}
.palette li small{margin-left:auto;color:var(--ink-3)}
.palette .vide{padding:20px;color:var(--ink-3);text-align:center}
/* ---- Volet latéral (détail sans quitter la liste) ------------------------------------------------- */
.tiroir-bg{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:85;display:none;opacity:0;transition:opacity 200ms}
.tiroir-bg.open{display:block;opacity:1}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);background:#fff;box-shadow:var(--sh-3);z-index:86;transform:translateX(100%);transition:transform 260ms var(--ease);display:flex;flex-direction:column}
.tiroir.open{transform:none}
.tiroir .t-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.tiroir .t-b{padding:18px 22px;overflow:auto;flex:1}
/* ---- Compléments : chips de filtre, sparkline, barre de progression fine, état vide ----------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.progress{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width var(--t-slow) var(--ease)}
.progress.ok i{background:var(--proof)}.progress.warn i{background:var(--warn)}.progress.danger i{background:var(--danger)}
.sparkline{width:96px;height:28px}
.sparkline path{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round}
.sparkline .zone{fill:var(--brand);opacity:.12;stroke:none}
.kbd{font-family:var(--mono);font-size:.7rem;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink-3)}
.table.compact td{padding:9px 12px}
.ligne-detail{display:none;background:var(--surface-2)}
.ligne-detail.open{display:table-row;animation:fade-up var(--t) var(--ease)}
/* La colonne de gauche est peinte sur toute la hauteur de la page : la barre latérale reste « sticky » (100vh,
défile avec l'écran) et le fond sombre continue sous elle jusqu'en bas, même sur une page plus longue que l'écran. */
.app{background:linear-gradient(90deg,var(--side-bg) 0 var(--sidebar-w),var(--bg) var(--sidebar-w))}
.admin .app{background:linear-gradient(90deg,var(--side-bg) 0 var(--sidebar-w),var(--bg) var(--sidebar-w))}
.main{display:flex;flex-direction:column;min-height:100vh}
.main>.content{flex:1}
@media (max-width:800px){.app,.admin .app{background:var(--bg)}}
/* ---- Mobile et application : zones sûres (encoche, barre d'accueil), cibles tactiles, pas de zoom iOS ---- */
.topbar{padding-top:env(safe-area-inset-top);height:calc(var(--topbar-h) + env(safe-area-inset-top))}
.content{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.toasts{bottom:calc(24px + env(safe-area-inset-bottom))}
.sidebar{padding-top:calc(16px + env(safe-area-inset-top))}
@media (max-width:800px){
.input,.select,.textarea{font-size:16px}
.btn,.icon-btn,.nav a{min-height:44px}
.topbar{padding-left:12px;padding-right:12px;gap:8px}
.topbar .crumbs{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding:16px 14px calc(32px + env(safe-area-inset-bottom))}
.kpi .value{font-size:1.5rem}
.page-head h1{font-size:1.4rem}
.table{font-size:.86rem}.table th,.table td{padding:10px 10px}
.tiroir{width:100vw}
}
/* Dans l'application : pas de pied de page légal (les liens sont dans le menu de l'app), pas de recherche Ctrl+K. */
.in-app .pied-legal,.in-app [data-palette-ouvrir]{display:none}
.seulement-app{display:none}
/* Rien ne doit élargir la page sur téléphone : les tableaux défilent dans leur cadre, les montants ne se coupent pas. */
.card,.grid>*,.main,.content{min-width:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table .num,.table td.num,.kpi .value{white-space:nowrap}
@media (max-width:800px){
.table{min-width:600px}
.task{flex-wrap:wrap;align-items:flex-start}
.task .body{flex:1 1 calc(100% - 64px)}
.task .cta{flex:1 1 100%;display:flex;justify-content:flex-end}
.task .sev{align-self:stretch;min-height:40px}
}
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
@media (max-width:800px){.app{grid-template-columns:minmax(0,1fr)}}
.tiroir:not(.open){visibility:hidden}
.main>.content{width:100%;box-sizing:border-box}
/* Le bandeau d'une démo : fixe, au-dessus de tout, impossible à fermer. */
.bandeau-demo{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--brand);color:#fff;font-size:.88rem;text-align:center}
.bandeau-demo a{color:#fff;font-weight:700;text-decoration:underline}
/* Le sélecteur de langue (comme Crapou) : bouton drapeau + code, liste déroulante. */
.lang-pick{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;font-size:.82rem;color:var(--ink-2);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.lang-btn:hover{border-color:var(--ink-4);box-shadow:var(--sh-2);transform:translateY(-1px)}
.lang-btn .lang-code{font-weight:700;letter-spacing:.03em}
.lang-btn .chev{transform:rotate(90deg);color:var(--ink-3);line-height:1;font-size:.85rem}
.lang-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:190px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);animation:fade-up 140ms var(--ease) backwards}
.lang-pop[hidden]{display:none}
.lang-pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:.88rem;color:var(--ink-2)}
.lang-pop a:hover{background:var(--surface-2);text-decoration:none}
.lang-pop a.on{background:var(--brand-soft);color:var(--brand-ink)}
.lang-pop .nom{flex:1}
.lang-pop .ok{color:var(--brand);font-weight:700}
/* Drapeau : coin arrondi et liseré, sinon le blanc du drapeau français se fond dans le fond blanc. */
.flag{width:20px;height:14px;border-radius:3px;flex:0 0 20px;box-shadow:0 0 0 1px rgba(15,23,42,.12) inset;display:block}
.auth>.lang-pick{position:absolute;top:16px;right:16px;z-index:5}
@media (max-width:800px){.topbar .lang-btn .lang-code,.topbar .lang-btn .chev{display:none}.topbar .lang-btn{padding:0 10px}}
/* Un bouton en cours de chargement (data-chargement) : roue qui tourne, texte d'attente, curseur d'attente. */
.btn.en-cours{cursor:progress;transform:none!important;box-shadow:none!important;opacity:1!important}
.btn.en-cours .spinner{width:16px;height:16px;flex:none}
.btn-secondary.en-cours .spinner,.btn-ghost.en-cours .spinner,.btn-danger.en-cours .spinner{border-color:rgba(15,23,42,.18);border-top-color:var(--ink)}
/* Les pages /dev/… en plein écran (repli de la dev bar, pour un agent qui les ouvrirait directement). */
.dev-page{max-width:1100px;margin:0 auto;padding:28px 24px 60px}
.dev-page h1{font-size:1.4rem;margin-bottom:6px}
.dev-page .sub{color:var(--ink-3);margin-bottom:22px}
.dev-page pre{background:var(--side-bg);color:var(--code-ink-2);padding:14px 16px;border-radius:12px;overflow:auto;font-size:12px;line-height:1.5;max-height:60vh}
.dev-page textarea{width:100%;min-height:120px;font-family:var(--mono);font-size:13px;padding:12px;border:1px solid var(--line);border-radius:10px}
/* La fenêtre de dialogue de l'application (composants.js, dialogue()). */
.modal-bg.dialogue{z-index:110}
.modal-bg.dialogue .modal{width:min(440px,92vw)}
.modal-bg.dialogue .m-b{padding:22px 24px 18px}
.dlg-titre{font-size:1.05rem;line-height:1.4;margin:0 0 6px;font-weight:650}
.dlg-texte{margin:0 0 4px}
.modal-bg.dialogue .textarea{margin-top:10px;width:100%}
/* Les menus déroulants : apparition douce, et des liens qui répondent au survol. */
.dd-menu a,.lang-pop a{transition:background var(--t),color var(--t)}
/* Les boutons : un léger enfoncement au clic, partout. */
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn[aria-busy="true"]{cursor:progress}
/* Moins de mouvement pour qui l'a demandé dans son système. */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}
/* Les compteurs cliquables (documents) : la carte entière est un lien de filtre. */
.kpi-lien{display:block;color:inherit;text-decoration:none;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.kpi-lien:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--sh-2);transform:translateY(-1px)}
.kpi-lien.actif{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.txt-danger{color:var(--danger)}.txt-warn{color:var(--warn)}.txt-right{text-align:right}
/* Filtres en ligne : les listes déroulantes gardent leur largeur naturelle. */
.filtres .select{width:auto;min-width:190px;flex:0 1 auto}
@media (max-width:640px){.filtres .select{width:100%;min-width:0;flex:1 1 100%}}
/* L'ancienne forme des indicateurs (petite légende + .kpi dans une carte) prend le style des cartes .kpi. */
.card-b > .kpi{padding:0;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1.1;color:var(--ink)}
.card-b:has(> .kpi) > small.muted:first-child{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
/* Le champ « fichier » : un vrai bouton au style de l'application, plus le « Choose Files » du système. */
input[type=file]{font:inherit;font-size:.86rem;color:var(--ink-3);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.84rem;margin-right:10px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:border-color var(--t),background var(--t)}
input[type=file]::file-selector-button:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
/* Recherche instantanée (barre du haut) et groupes de la palette */
.recherche-globale{position:relative}
.recherche-globale .input{width:260px;transition:width 200ms var(--ease)}
.recherche-globale .input:focus{width:340px}
.recherche-globale[aria-busy] .input{background-image:linear-gradient(90deg,transparent,var(--brand-soft),transparent);background-size:200% 100%;animation:ri-charge 1s linear infinite}
@keyframes ri-charge{from{background-position:200% 0}to{background-position:-200% 0}}
.ri-panneau{position:absolute;right:0;top:calc(100% + 8px);width:min(460px,92vw);max-height:min(70vh,560px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:6px;z-index:40;animation:up 160ms var(--ease)}
.ri-panneau[hidden]{display:none}
.ri-groupe+.ri-groupe{border-top:1px solid var(--line-2);margin-top:4px;padding-top:4px}
.ri-titre,.palette li.titre{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 4px}
.palette li.titre{cursor:default;background:none}
.palette li.titre:hover{background:none;color:var(--ink-3)}
.palette li small.d{margin-left:6px;color:var(--ink-3)}
.ri-panneau a{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none}
.ri-panneau a small{color:var(--ink-3);font-size:.8rem}
.ri-panneau a.on,.ri-panneau a:hover{background:var(--brand-soft);color:var(--brand-ink);text-decoration:none}
.ri-panneau a.ri-tout{flex-direction:row;justify-content:center;border-top:1px solid var(--line-2);margin-top:4px;border-radius:0 0 9px 9px;font-weight:500;color:var(--brand-ink)}
.ri-panneau mark,.palette mark{background:none;color:inherit;font-weight:700}
.ri-vide{padding:16px;text-align:center;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.recherche-globale .input{transition:none}.recherche-globale[aria-busy] .input{animation:none}}
/* Carte du parc */
.carte-mise{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.carte-cadre{overflow:hidden;position:relative}
.carte-zone{height:min(72vh,680px);min-height:420px;background:var(--surface-2)}
.carte-legende{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 14px;border-bottom:1px solid var(--line-2);font-size:.85rem;color:var(--ink-2)}
.carte-filtre{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.carte-filtre input{accent-color:var(--brand)}
.pastille{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.st-loue{background:var(--proof)}.st-louable{background:var(--brand)}.st-travaux{background:var(--warn)}.st-occupe{background:var(--ink-3)}.st-vente{background:var(--st-vente)}
.carte-liste{max-height:min(72vh,724px);display:flex;flex-direction:column}
.carte-liste .card-b{overflow:auto;gap:2px}
.carte-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:10px;font:inherit;color:var(--ink-2);cursor:pointer}
.carte-item span{display:flex;flex-direction:column;min-width:0;flex:1}
.carte-item b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carte-item:hover,.carte-item.on{background:var(--brand-soft)}
.carte-item[hidden]{display:none}
.carte-item-off{cursor:default}
.carte-item-off:hover{background:var(--surface-2)}
.carte-sep{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:12px 10px 4px}
.carte-indispo{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:24px;color:var(--ink-3)}
.carte-indispo svg,.carte-mini-off svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.6;color:var(--ink-3)}
.carte-bulle{font:13px/1.45 var(--font);color:var(--ink-2);min-width:200px;max-width:260px}
.carte-bulle b{display:block;color:var(--ink);font-size:14px}
.carte-bulle .ligne{color:var(--ink-3)}
.carte-bulle .actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.carte-bulle a,.carte-bulle button{font:inherit;font-weight:600;color:var(--brand-ink);background:none;border:0;padding:0;cursor:pointer}
.carte-placement{position:absolute;left:50%;top:56px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r-pill);font-size:.85rem;box-shadow:var(--sh-3);z-index:5;display:flex;gap:10px;align-items:center}
.carte-placement button{background:none;border:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer}
.carte-mini{height:220px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
@media (max-width:980px){.carte-mise{grid-template-columns:1fr}.carte-liste{max-height:none}.carte-zone{height:60vh;min-height:340px}}
/* Démo : bandeau, rappel de sortie, actions grisées */
.bandeau-demo .demo-restant{font-variant-numeric:tabular-nums;font-weight:700}
.demo-recommencer{margin:0;display:inline}
.demo-recommencer button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font:inherit;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);cursor:pointer}
.demo-recommencer button:hover{background:rgba(255,255,255,.26)}
.modal.modal-sm{max-width:560px}
.demo-atouts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.demo-atouts li{display:flex;gap:8px;align-items:flex-start;color:var(--ink-2)}
.demo-atouts svg{width:18px;height:18px;flex:none;stroke:var(--proof);fill:none;stroke-width:2;margin-top:2px}
.demo-sortie-actions{flex-wrap:wrap}
.demo-sortie-actions [data-demo-quitter]{margin-right:auto}
form.demo-bloque{position:relative}
form.demo-bloque > :not(.demo-note){opacity:.5}
.demo-note{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn-ink-2);font-size:.85rem}
/* États des lieux : éléments sans état, liste de ce qui manque */
.element-edl.sans-etat{box-shadow:inset 3px 0 0 var(--warn)}
.element-edl.pulse{animation:edl-pulse 1.6s var(--ease)}
@keyframes edl-pulse{0%,100%{background:transparent}30%{background:var(--warn-soft)}}
.liste-manquants{margin:6px 0 0;padding-left:18px;display:grid;gap:2px;font-size:.88rem}
.liste-manquants a{color:inherit;text-decoration:underline}
.supprimer-element{margin:0}
@media (prefers-reduced-motion:reduce){.element-edl.pulse{animation:none}}
/* Bulles d'aide */
.bulle{position:relative;display:inline-flex;vertical-align:middle;margin-left:2px}
.bulle-i{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-4);background:#fff;color:var(--ink-3);font:600 10px/14px var(--font);font-style:italic;text-transform:none;letter-spacing:0;padding:0;cursor:help;display:inline-flex;align-items:center;justify-content:center}
.bulle-i:hover,.bulle-i:focus-visible,.bulle.open .bulle-i{border-color:var(--brand);color:var(--brand);outline:none}
.bulle-texte{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:min(280px,80vw);background:var(--ink);color:#fff;font:400 12.5px/1.45 var(--font);text-transform:none;letter-spacing:0;text-align:left;padding:8px 10px;border-radius:8px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t);z-index:60;pointer-events:none;white-space:normal}
.bulle-texte::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink)}
.bulle:hover .bulle-texte,.bulle-i:focus-visible + .bulle-texte,.bulle.open .bulle-texte{opacity:1;visibility:visible;transform:translateX(-50%)}
.bulle.gauche .bulle-texte{left:auto;right:-8px;transform:translateY(4px)}.bulle.gauche .bulle-texte::after{left:auto;right:10px}
.bulle.gauche:hover .bulle-texte,.bulle.gauche.open .bulle-texte,.bulle.gauche .bulle-i:focus-visible + .bulle-texte{transform:none}
.bulle.droite .bulle-texte{left:-8px;transform:translateY(4px)}.bulle.droite .bulle-texte::after{left:14px}
.bulle.droite:hover .bulle-texte,.bulle.droite.open .bulle-texte,.bulle.droite .bulle-i:focus-visible + .bulle-texte{transform:none}
/* Mise en location : mode d'emploi */
.etapes-location{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.etapes-location li{display:flex;gap:12px;align-items:flex-start}
.etapes-location .num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.etapes-location p{margin:4px 0 0}
.annonce-ligne{display:flex;align-items:center;gap:8px}
.annonce-ligne .task{flex:1;min-width:0}
.location-explication > summary{cursor:pointer;list-style:none}
.location-explication > summary::-webkit-details-marker{display:none}
.location-explication > summary::after{content:"▾";margin-left:auto;color:var(--ink-3);transition:transform var(--t)}
.location-explication[open] > summary::after{transform:rotate(180deg)}
.location-explication:not([open]) > summary{border-bottom:0}
/* Unités et compteurs (fiche du bien) */
.unites-liste{display:grid;gap:2px}
.unite-ligne{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line-2)}
.unite-ligne:last-child{border-bottom:0}
.unite-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.unite-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.unite-ic.energie-electricite{background:var(--cat-jaune);color:var(--cat-jaune-ink)}.unite-ic.energie-gaz{background:var(--cat-orange);color:var(--cat-orange-ink)}.unite-ic.energie-eau{background:var(--cat-bleu);color:var(--cat-bleu-ink)}.unite-ic.energie-mazout{background:var(--cat-pierre);color:var(--cat-pierre-ink)}.unite-ic.energie-chaleur{background:var(--cat-rouge);color:var(--cat-rouge-ink)}
.unite-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.unite-corps b{font-weight:600}
.unite-actions{display:flex;align-items:center;gap:4px}
.unites-bail{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0}
.unites-bail.err{border-color:var(--danger)}
.unites-bail legend{font-weight:600;font-size:.88rem;padding:0 4px}
.unites-choix{display:grid;grid-template-columns:1fr;gap:6px}
.unites-choix .check-input{display:flex;align-items:flex-start;gap:8px}
.unites-choix .check-input input{margin-top:3px}
.unites-choix .check-input span{display:inline-flex;align-items:center;gap:6px}
.unites-choix svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.unites-choix .indisponible{opacity:.6}
.repartition{border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0}
.repartition legend{font-weight:600;font-size:.88rem;padding:0 4px}
.btn-danger-texte{color:var(--danger)}
.flex-1{flex:1}
/* QR d'un immeuble : choix de l'unité */
.qr-unites{border-bottom:1px solid var(--line-2)}
.qr-unites-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.qr-unite-tuile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.9rem;text-align:center;text-decoration:none;min-height:44px;transition:border-color 150ms,box-shadow 150ms}
.qr-unite-tuile:hover,.qr-unite-tuile:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.qr-unite-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--brand-soft);color:var(--brand);flex:none}
.qr-unite-ic.petit{width:32px;height:32px;border-radius:10px}
.qr-unite-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qr-unite-ic.petit svg{width:18px;height:18px}
.qr-unite-ligne svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
@media (max-width:640px){.unite-ligne{flex-wrap:wrap}.unite-corps{flex-basis:calc(100% - 46px)}.unite-ligne > .badge{margin-left:46px}.unite-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}}
/* v2.3.0 : états des lieux complets (icônes de pièces, relevés, inventaire, ajout de pièce typée). */
.piece-ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.piece-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.piece-releves .piece-ic{background:var(--cat-jaune);color:var(--cat-jaune-ink)}
.piece-exterieur .piece-ic{background:var(--cat-vert);color:var(--cat-vert-ink)}
.piece-inventaire .piece-ic{background:var(--cat-violet);color:var(--cat-violet-ink)}
.piece-edl .card-h .bulle,.piece-edl .card-h .badge{flex:none}
.piece-edl .card-h form{margin-left:auto}
.releve-index{display:inline-flex;gap:6px;align-items:center}
.input-index{width:150px;font-family:var(--mono);text-align:right}
.select-mesure{width:auto;min-width:80px}
.input-quantite{width:76px;text-align:center}
.inventaire-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;align-items:center}
.suggestions-inventaire{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.suggestions-inventaire .chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
.ajout-piece{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ajout-piece .select{width:auto;min-width:180px}
.ajout-piece .input{flex:1;min-width:160px}
.legende-etats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.pastille-etat{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.76rem;color:#fff}
.pastille-etat.etat-neuf{background:var(--proof)}.pastille-etat.etat-bon{background:var(--info)}.pastille-etat.etat-usage{background:var(--warn)}.pastille-etat.etat-degrade{background:var(--danger)}
.piece-public summary .piece-ic{width:24px;height:24px;border-radius:7px}
.piece-public summary .piece-ic svg{width:14px;height:14px}
@media (max-width:640px){.inventaire-details{grid-template-columns:1fr 1fr}.inventaire-details .check-input{grid-column:1 / -1}.input-index{width:120px}}
/* Une bulle fermée ne prend aucune place : sinon, près d'un bord, elle élargit la page (défilement horizontal). */
.bulle-texte{display:none}
.bulle:hover .bulle-texte,.bulle-i:focus-visible + .bulle-texte,.bulle.open .bulle-texte{display:block}
.releve-edl .nom-element{max-width:none;min-width:200px}
@media (max-width:640px){.releve-edl .nom-element{min-width:0;flex-basis:100%}}
/* v2.4.0 : registre lisible (filtres, écritures, preuve). */
.registre-filtres .card-b{display:flex;flex-direction:column;gap:10px}
.registre-filtres-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.registre-date{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;color:var(--ink-3)}
.registre-date .input{width:auto}
.registre-texte{flex:1;min-width:180px}
.registre-boutons{margin-left:auto;display:inline-flex;gap:6px}
.choix-biens{position:relative}
.choix-biens > summary{list-style:none;cursor:pointer;min-width:200px;display:flex;align-items:center}
.choix-biens > summary::-webkit-details-marker{display:none}
.choix-biens-liste{position:absolute;z-index:30;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:10px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;min-width:280px}
.seg-wrap{flex-wrap:wrap}
.seg-choix{position:relative;cursor:pointer}
.seg-choix input{position:absolute;opacity:0;pointer-events:none}
.seg-choix span{display:inline-block;padding:6px 12px;border-radius:8px;color:var(--ink-3);font-weight:600;font-size:.84rem}
.seg-choix input:checked + span{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.seg-choix input:focus-visible + span{outline:2px solid var(--brand);outline-offset:1px}
.seal.rompu{background:var(--danger-soft);color:var(--danger-ink)}
.reg-liste{display:flex;flex-direction:column;gap:0;padding-top:4px}
.reg-ligne{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.reg-ligne:last-child{border-bottom:0}
.reg-ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--line-2);color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.reg-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cat-loyers .reg-ic{background:var(--cat-vert);color:var(--cat-vert-ink)}.cat-baux .reg-ic{background:var(--brand-soft);color:var(--brand-ink)}.cat-edl .reg-ic{background:var(--cat-violet);color:var(--cat-violet-ink)}.cat-demandes .reg-ic{background:var(--cat-orange);color:var(--cat-orange-ink)}.cat-documents .reg-ic{background:var(--cat-bleu);color:var(--cat-bleu-ink)}
.reg-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.reg-tete{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.reg-phrase{margin:0;font-size:.92rem}
.reg-cibles{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.reg-cibles .badge{white-space:normal;max-width:100%;overflow-wrap:anywhere;text-align:left}
.reg-details{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;font-size:.82rem}
.reg-details div{display:flex;gap:4px}
.reg-details dt{color:var(--ink-3)}
.reg-details dd{margin:0}
.reg-preuve summary{cursor:pointer;font-size:.8rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.reg-preuve summary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.reg-preuve[open]{background:var(--line-2);border-radius:10px;padding:8px 10px}
.reg-preuve .reg-details{flex-direction:column;margin-top:6px}
.reg-hash{word-break:break-all;font-size:.76rem}
.reg-brut{max-height:220px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:.74rem;white-space:pre-wrap;word-break:break-word;margin:6px 0}
@media (max-width:640px){.registre-boutons{margin-left:0;width:100%;justify-content:flex-end}.choix-biens,.choix-biens > summary{width:100%}.registre-date{flex:1}.registre-date .input{flex:1;min-width:0}}
.reg-compacte .reg-cibles,.reg-compacte .reg-details{display:none}
.reg-compacte .reg-preuve[open] .reg-details{display:flex}
.reg-compacte .reg-ligne{padding:8px 0}
/* v2.5.0 : analyse et rentabilité (indicateurs, graphiques SVG). Palette des séries validée pour le daltonisme. */
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis-analyse .kpi{padding:16px 18px}
.kpis-analyse .kpi .value{font-size:1.5rem}
.kpi .sous{font-size:.8rem;color:var(--ink-3);margin-top:6px}
.graphique{width:100%;height:auto;display:block}
.graphique .g-grille{stroke:var(--line-2);stroke-width:1}
.graphique .g-base{stroke:var(--line);stroke-width:1}
.graphique .g-axe,.graphique .g-libelle,.graphique .g-valeur{fill:var(--ink-3);font:12px var(--font)}
.graphique .g-libelle{fill:var(--ink-2)}
.graphique .g-valeur{fill:var(--ink-2);font-weight:600}
.graphique .g-barre{stroke:var(--surface);stroke-width:1}
.graphique .g-barre:hover{opacity:.85}
.serie-1{fill:var(--serie-1);background:var(--serie-1)}
.serie-2{fill:var(--serie-2);background:var(--serie-2)}
.legende{display:flex;gap:14px;font-size:.82rem;color:var(--ink-2);flex-wrap:wrap}
.legende span{display:inline-flex;align-items:center;gap:6px}
.pastille{display:inline-block;width:10px;height:10px;border-radius:3px}
.liste-fiscale{margin:6px 0 0;padding-left:16px}
.table tr.total td{border-top:2px solid var(--line)}
@media (max-width:1100px){.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.span-7,.span-5{grid-column:span 12}}
@media (max-width:640px){.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis-analyse .kpi .value{font-size:1.25rem}}
.barres-h{display:flex;flex-direction:column;gap:10px}
.barre-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;font-size:.86rem}
.barre-h-libelle{color:var(--ink-2)}
.barre-h-piste{display:block;height:12px}
.barre-h-valeur{display:block;height:12px;border-radius:0 4px 4px 0}
.barre-h-montant{font-variant-numeric:tabular-nums;white-space:nowrap}
.graphique-defile{overflow-x:auto}
@media (max-width:640px){.graphique-defile .graphique{min-width:600px}}
/* v2.7.0 : remarques sur un dossier partagé. */
.partage-ligne{border-top:1px solid var(--line-2);padding-top:8px;gap:6px}
.remarque-partage{border-left:3px solid var(--line);padding:4px 10px}
.remarque-partage.non-lue{border-left-color:var(--brand);background:var(--brand-tint)}
.remarque-partage p{margin:4px 0;font-size:.9rem}
.remarque-form{border-top:1px solid var(--line-2);padding-top:12px}
/* v2.7 : demandes au locataire, devis, photos */
.demande-bailleur{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:4px}
.reponse-locataire{background:var(--surface-2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.reponse-locataire p{margin:0}
.note-bailleur{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.note-bailleur p{margin:4px 0 0}
img.avatar{object-fit:cover;padding:0}
.avatar.lg{width:64px;height:64px;font-size:1.2rem}
.input-fichier{max-width:260px}
.bien-photo{width:64px;height:64px;border-radius:14px;object-fit:cover;box-shadow:var(--sh-1);flex:none}
.bien-lien{display:inline-flex;align-items:center;gap:8px}
.bien-vignette{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none}
.bien-couverture{width:100%;height:120px;object-fit:cover;display:block;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.unite-photo{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none}
.photo-apercu{max-width:100%;max-height:240px;border-radius:12px;object-fit:cover;align-self:flex-start}
/* v2.8 : parcours de démarrage */
.demarrage-barre{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;min-width:60px}
.demarrage-barre>span{display:block;height:100%;border-radius:inherit;background:var(--proof);transition:width .4s ease}
.demarrage-barre.grande{height:8px}
.demarrage-mini{display:flex;flex-direction:column;gap:6px;margin:0 8px 6px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);color:inherit;font-size:.82rem;text-decoration:none}
.demarrage-mini:hover{background:rgba(255,255,255,.1)}
.demarrage-mini .demarrage-barre{background:rgba(255,255,255,.15)}
.demarrage-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.demarrage-etape{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.demarrage-etape.prochaine{border-color:var(--brand);box-shadow:var(--sh-1)}
.demarrage-etape.fait{background:var(--surface-2)}
.demarrage-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;border:2px solid var(--line);color:var(--ink-3)}
.demarrage-etape.fait .demarrage-num{background:var(--proof);border-color:var(--proof);color:#fff}
.demarrage-num svg,.demarrage-coche svg,.demarrage-bravo-ic svg{width:16px;height:16px}
.demarrage-texte{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.demarrage-plus-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.demarrage-plus-liste li{display:flex;align-items:center;gap:8px;font-size:.9rem}
.demarrage-plus-liste li.fait{color:var(--ink-3)}
.demarrage-coche{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center}
.demarrage-plus-liste li.fait .demarrage-coche{background:var(--proof);border-color:var(--proof);color:#fff}
.demarrage-bravo{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--proof-soft);border:1px solid var(--line);animation:bravo-entree .5s ease}
.demarrage-bravo-ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--proof);color:#fff;display:grid;place-items:center}
.demarrage-bravo-corps{flex:1;min-width:0}
.demarrage-bravo-corps p{margin:4px 0 10px}
.demarrage-bravo-suite{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.demarrage-bravo-suite .demarrage-barre{width:120px}
@keyframes bravo-entree{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.demarrage-bravo{animation:none}.demarrage-barre>span{transition:none}}
@media (max-width:640px){.demarrage-etape{flex-wrap:wrap}.demarrage-texte{flex:1 1 calc(100% - 52px)}.demarrage-etape .btn{margin-left:40px}}
.espace-un-clic{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--brand-tint)}
/* v2.9 : l'IA dans les parcours */
.lien-resume svg,.recit-registre summary svg,.ia-index svg{width:14px;height:14px;vertical-align:-2px;flex:none}
.ia-lire{margin-top:4px}
.demande-ia{border-bottom:1px solid var(--line);padding-top:10px;padding-bottom:10px}
.demande-ia .alert p{margin:0}
.recit-registre summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.ia-index{position:relative;cursor:pointer}
/* v2.10 : dossier bancaire */
.banque-score{display:flex;align-items:baseline;gap:8px}
.banque-score b{font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.banque-score small{margin-left:auto}
.banque-critere{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--line)}
.banque-projet-resume{background:var(--surface-2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.banque-etape{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.banque-etape[open]{border-color:var(--brand-tint);box-shadow:var(--sh-1)}
.banque-etape-tete{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none}
.banque-etape-tete::-webkit-details-marker{display:none}
.banque-etape-tete small{grid-column:2}
.banque-etape-corps{padding:0 12px 12px}
.banque-etape-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:.85rem;flex:none}
.banque-etape-n.fait{background:var(--proof-soft);color:var(--proof)}
.banque-etape-n svg{width:14px;height:14px}
.banque-guide-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.banque-guide-etapes li{display:flex;gap:10px;align-items:flex-start}
.banque-reference{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.banque-adresse{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.banque-adresse .field{grid-column:span 2;min-width:0}
.banque-adresse .banque-rue,.banque-adresse .banque-commune{grid-column:span 6}
.banque-frais-ligne,.banque-travaux-ligne{display:grid;gap:8px;align-items:center}
.banque-frais-ligne{grid-template-columns:minmax(0,1fr) 150px}
.banque-travaux-ligne{grid-template-columns:130px minmax(0,1fr) auto;padding-bottom:8px;border-bottom:1px dashed var(--line-2)}
.banque-travaux-ligne>input{grid-column:1 / -1}
.banque-frais-total{border-top:1px dashed var(--line-2);padding-top:6px}
.banque-plus>summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:.9rem}
.banque-plus>div{padding-top:8px}
.banque-reco{padding-top:8px;border-top:1px solid var(--line)}
.banque-reco:first-child{border-top:0;padding-top:0}
.banque-reco .badge{flex:none}
.banque-note-communiquee{display:flex;justify-content:space-between;align-items:center;background:var(--brand-soft);color:var(--brand-ink);border-radius:10px;padding:8px 12px}
.banque-note-communiquee b{font-size:1.15rem}
.banque-options{display:flex;flex-direction:column;gap:6px}
@media (max-width:800px){
.banque-frais-ligne{grid-template-columns:minmax(0,1fr) 140px}
}
.banque-ligne{padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.banque-ligne:last-child{border-bottom:0}
[data-test=banque-parc] .th-r,[data-test=banque-credits] .th-r{white-space:nowrap}
/* v2.11 : recommandation, assurance et sinistres */
.sinistre-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink-3);font-weight:700;font-size:.85rem;flex:none}
.sinistre-num.fait{background:var(--proof-soft);color:var(--proof)}
.sinistre-num svg{width:16px;height:16px}
.sinistre-alerte{color:var(--danger)}
.reco-texte{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--line-2);color:var(--ink-2);font-style:italic}
/* v2.12 : budget prédictif, tournées ; icônes dans les étiquettes et les petits textes */
.badge svg,small > svg,.sinistre-num svg,.h-petit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-2px}
.sinistre-num svg{width:15px;height:15px}
.kpis-budget .kpi .value{font-size:1.45rem;line-height:1.2;white-space:normal}
/* v2.13 : « J'ai un problème », demande d'avis */
.probleme-bouton{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink-2);font:inherit;font-size:.82rem;font-weight:600;box-shadow:var(--sh-2);cursor:pointer}
.probleme-bouton:hover{color:var(--brand);border-color:var(--brand)}
.probleme-bouton svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.probleme-bouton span{display:none}.probleme-bouton{padding:10px}}
@media print{.probleme-bouton{display:none}}
.probleme-categories{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
@media (max-width:640px){.probleme-categories{grid-template-columns:1fr}}
.probleme-reponse p{margin:4px 0 6px 14px}
.avis-carte{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.avis-carte .actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
#m-probleme fieldset{border:0;padding:0;margin:0;min-width:0}#m-probleme legend{padding:0;margin-bottom:4px}
.carte-tournee{height:260px;min-height:0;border-radius:12px;overflow:hidden}
fieldset.stack{border:0;padding:0;margin:0;min-width:0}fieldset.stack > legend{padding:0;margin-bottom:4px}
/* v2.15 : utilitaires remplaçant les attributs style des vues (la politique de sécurité interdit désormais les styles en ligne).
Ils gardent la priorité qu'avait le style en ligne (!important), sauf l'affichage qui doit céder à [hidden]. */
.u-align-items-center{align-items:center!important}
.u-align-items-end{align-items:end!important}
.u-background-f4f6fa{background:var(--bg)!important}
.u-background-fff{background:#fff!important}
.u-background-none{background:none!important}
.u-border-0{border:0!important}
.u-border-1px-solid-line{border:1px solid var(--line)!important}
.u-border-bottom-1px-solid-line{border-bottom:1px solid var(--line)!important}
.u-border-color-accent{border-color:var(--accent)!important}
.u-border-radius-0{border-radius:0!important}
.u-border-radius-10px{border-radius:10px!important}
.u-border-top-1px-solid-line{border-top:1px solid var(--line)!important}
.u-color-8fa0bc{color:var(--ink-muet)!important}
.u-color-fff{color:#fff!important}
.u-color-inherit{color:inherit!important}
.u-color-ink-3{color:var(--ink-3)!important}
.u-cursor-pointer{cursor:pointer!important}
.u-display-block:not([hidden]){display:block!important}
.u-display-inline:not([hidden]){display:inline!important}
.u-display-none:not([hidden]){display:none!important}
.u-flex-1{flex:1!important}
.u-flex-wrap-nowrap{flex-wrap:nowrap!important}
.u-flex-wrap-wrap{flex-wrap:wrap!important}
.u-font-inherit{font:inherit!important}
.u-font-size-p75rem{font-size:.75rem!important}
.u-font-size-p85rem{font-size:.85rem!important}
.u-font-size-p8rem{font-size:.8rem!important}
.u-font-size-p9rem{font-size:.9rem!important}
.u-gap-10px{gap:10px!important}
.u-gap-12px{gap:12px!important}
.u-gap-14px{gap:14px!important}
.u-gap-2px{gap:2px!important}
.u-gap-2px-12px{gap:2px 12px!important}
.u-gap-4px{gap:4px!important}
.u-gap-4px-12px{gap:4px 12px!important}
.u-gap-6px{gap:6px!important}
.u-gap-8px{gap:8px!important}
.u-grid-column-1-1{grid-column:1/-1!important}
.u-grid-column-span-2{grid-column:span 2!important}
.u-grid-template-columns-repeat-auto-fit-minmax-190px-1fr{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.u-height-1px{height:1px!important}
.u-height-60vh{height:60vh!important}
.u-justify-content-flex-end{justify-content:flex-end!important}
.u-left-9999px{left:-9999px!important}
.u-margin-0{margin:0!important}
.u-margin-0-0-20px{margin:0 0 20px!important}
.u-margin-14px-0-6px{margin:14px 0 6px!important}
.u-margin-40px-auto{margin:40px auto!important}
.u-margin-4px-0-0{margin:4px 0 0!important}
.u-margin-60px-auto{margin:60px auto!important}
.u-margin-bottom-26px{margin-bottom:26px!important}
.u-margin-bottom-6px{margin-bottom:6px!important}
.u-margin-left-12px{margin-left:12px!important}
.u-margin-left-auto{margin-left:auto!important}
.u-margin-top-24px{margin-top:24px!important}
.u-margin-top-8px{margin-top:8px!important}
.u-max-height-420px{max-height:420px!important}
.u-max-width-100pc{max-width:100%!important}
.u-max-width-1100px{max-width:1100px!important}
.u-max-width-110px{max-width:110px!important}
.u-max-width-200px{max-width:200px!important}
.u-max-width-230px{max-width:230px!important}
.u-max-width-260px{max-width:260px!important}
.u-max-width-320px{max-width:320px!important}
.u-max-width-420px{max-width:420px!important}
.u-max-width-620px{max-width:620px!important}
.u-max-width-640px{max-width:640px!important}
.u-max-width-720px{max-width:720px!important}
.u-max-width-760px{max-width:760px!important}
.u-max-width-860px{max-width:860px!important}
.u-min-width-120px{min-width:120px!important}
.u-min-width-130px{min-width:130px!important}
.u-min-width-140px{min-width:140px!important}
.u-min-width-160px{min-width:160px!important}
.u-min-width-200px{min-width:200px!important}
.u-min-width-220px{min-width:220px!important}
.u-overflow-auto{overflow:auto!important}
.u-overflow-hidden{overflow:hidden!important}
.u-padding-0{padding:0!important}
.u-padding-0-0-6px{padding:0 0 6px!important}
.u-padding-0-8px-8px{padding:0 8px 8px!important}
.u-padding-12px{padding:12px!important}
.u-padding-12px-8px-0{padding:12px 8px 0!important}
.u-padding-18px-12px{padding:18px 12px!important}
.u-padding-8px{padding:8px!important}
.u-padding-bottom-10px{padding-bottom:10px!important}
.u-padding-left-18px{padding-left:18px!important}
.u-padding-left-20px{padding-left:20px!important}
.u-position-absolute{position:absolute!important}
.u-position-relative{position:relative!important}
.u-right-4px{right:-4px!important}
.u-text-align-center{text-align:center!important}
.u-text-align-left{text-align:left!important}
.u-top-4px{top:-4px!important}
.u-top-auto{top:auto!important}
.u-white-space-pre-wrap{white-space:pre-wrap!important}
.u-width-0{width:0!important}
.u-width-100pc{width:100%!important}
.u-width-150px{width:150px!important}
.u-width-1px{width:1px!important}
.u-width-200px{width:200px!important}
.u-width-280px{width:280px!important}
.u-width-80px{width:80px!important}
.u-width-auto{width:auto!important}
/* Largeurs en pourcentage (barres de progression, graphiques) : lg-0 à lg-100. */
.lg-0{width:0%!important}.lg-1{width:1%!important}.lg-2{width:2%!important}.lg-3{width:3%!important}.lg-4{width:4%!important}.lg-5{width:5%!important}.lg-6{width:6%!important}.lg-7{width:7%!important}.lg-8{width:8%!important}.lg-9{width:9%!important}.lg-10{width:10%!important}.lg-11{width:11%!important}.lg-12{width:12%!important}.lg-13{width:13%!important}.lg-14{width:14%!important}.lg-15{width:15%!important}.lg-16{width:16%!important}.lg-17{width:17%!important}.lg-18{width:18%!important}.lg-19{width:19%!important}.lg-20{width:20%!important}.lg-21{width:21%!important}.lg-22{width:22%!important}.lg-23{width:23%!important}.lg-24{width:24%!important}.lg-25{width:25%!important}.lg-26{width:26%!important}.lg-27{width:27%!important}.lg-28{width:28%!important}.lg-29{width:29%!important}.lg-30{width:30%!important}.lg-31{width:31%!important}.lg-32{width:32%!important}.lg-33{width:33%!important}.lg-34{width:34%!important}.lg-35{width:35%!important}.lg-36{width:36%!important}.lg-37{width:37%!important}.lg-38{width:38%!important}.lg-39{width:39%!important}.lg-40{width:40%!important}.lg-41{width:41%!important}.lg-42{width:42%!important}.lg-43{width:43%!important}.lg-44{width:44%!important}.lg-45{width:45%!important}.lg-46{width:46%!important}.lg-47{width:47%!important}.lg-48{width:48%!important}.lg-49{width:49%!important}.lg-50{width:50%!important}.lg-51{width:51%!important}.lg-52{width:52%!important}.lg-53{width:53%!important}.lg-54{width:54%!important}.lg-55{width:55%!important}.lg-56{width:56%!important}.lg-57{width:57%!important}.lg-58{width:58%!important}.lg-59{width:59%!important}.lg-60{width:60%!important}.lg-61{width:61%!important}.lg-62{width:62%!important}.lg-63{width:63%!important}.lg-64{width:64%!important}.lg-65{width:65%!important}.lg-66{width:66%!important}.lg-67{width:67%!important}.lg-68{width:68%!important}.lg-69{width:69%!important}.lg-70{width:70%!important}.lg-71{width:71%!important}.lg-72{width:72%!important}.lg-73{width:73%!important}.lg-74{width:74%!important}.lg-75{width:75%!important}.lg-76{width:76%!important}.lg-77{width:77%!important}.lg-78{width:78%!important}.lg-79{width:79%!important}.lg-80{width:80%!important}.lg-81{width:81%!important}.lg-82{width:82%!important}.lg-83{width:83%!important}.lg-84{width:84%!important}.lg-85{width:85%!important}.lg-86{width:86%!important}.lg-87{width:87%!important}.lg-88{width:88%!important}.lg-89{width:89%!important}.lg-90{width:90%!important}.lg-91{width:91%!important}.lg-92{width:92%!important}.lg-93{width:93%!important}.lg-94{width:94%!important}.lg-95{width:95%!important}.lg-96{width:96%!important}.lg-97{width:97%!important}.lg-98{width:98%!important}.lg-99{width:99%!important}.lg-100{width:100%!important}
.langues-barre{display:flex;justify-content:flex-end;padding:10px 14px 0}
.banque-valeur{text-align:right}.banque-valeur-court{white-space:nowrap}
.skeleton-ligne{height:18px;margin-bottom:10px}.skeleton-court{width:70%}
/* Application mobile : ce qui vend est masqué (Support\Achats::css(), recopié ici depuis la v2.15 ; un banc vérifie la copie). */
.in-app .achat,.in-app [data-achat],.in-app .hors-app{display:none!important}.in-app .seulement-app{display:block!important}
/* v2.16 : corps de métier des artisans (puces cochables avec icône), fiche d'artisan */
.metiers-choix{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.metier-puce{position:relative}
.metier-puce input{position:absolute;opacity:0;pointer-events:none}
.metier-puce span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.85rem;color:var(--ink-2);background:var(--surface);cursor:pointer;transition:border-color var(--t),background var(--t)}
.metier-puce span svg,.metier-icone svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.metier-puce input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.metier-puce input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.metier-icones{display:inline-flex;gap:4px;vertical-align:middle;margin-right:6px}
.metier-icone{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--brand-ink)}
.artisan-filtres{display:flex;flex-wrap:wrap;gap:6px}
.artisan-filtres a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.85rem;color:var(--ink-2);text-decoration:none}
.artisan-filtres a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.artisan-filtres a.actif{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.chrono{list-style:none;margin:0;padding:0}
.chrono li{display:grid;grid-template-columns:96px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);align-items:start}
.chrono li:last-child{border-bottom:0}
.chrono .chrono-date{color:var(--ink-3);font-size:.85rem}
@media (max-width:640px){.chrono li{grid-template-columns:1fr auto}.chrono .chrono-date{grid-column:1/-1}}
.modal.modal-large{width:min(760px,94vw)}
.artisan-entete{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.artisan-entete .metier-icone{width:44px;height:44px}
.artisan-entete .metier-icone svg{width:24px;height:24px}
.artisan-coord{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;margin:0}
.artisan-coord dt{font-size:.8rem;color:var(--ink-3)}
.artisan-coord dd{margin:0;overflow-wrap:anywhere}
.qr-virement{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qr-virement svg{width:148px;height:148px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm)}
.annonce-photo{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-lg) var(--r-lg) 0 0}
.annonce-atouts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.annonce-atouts li{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-ink);font-size:.85rem}
.annonce-atouts svg,.conseils-liste svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.annonce-confiance{border-top:1px solid var(--line);background:var(--brand-tint)}
.annonce-confiance .ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff}
.annonce-confiance .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.annonce-confiance ul{margin:6px 0 0;padding-left:20px}
.conseils-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.conseils-liste li{display:flex;gap:8px;align-items:flex-start}
.conseils-liste li.fait{color:var(--ink-3)}
.conseils-liste li.a-faire svg{color:var(--warn)}
.texte-danger{color:var(--danger)}
.cadenas{display:inline-flex;align-items:center;color:var(--warn);vertical-align:middle}
.cadenas svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav a .cadenas{margin-left:auto}
.nav a .cadenas svg{width:15px;height:15px}
.verrou-page{display:flex;gap:12px;align-items:flex-start}
.verrou-page .cadenas svg{width:22px;height:22px}
.formules-grille td.oui,.formules-grille td.non{text-align:center}
.formules-grille td.oui svg{width:18px;height:18px;stroke:var(--proof);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.checklist-bail li{display:flex;gap:8px;align-items:center;list-style:none;padding:3px 0}
.checklist-bail li svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.checklist-bail li.fait{color:var(--proof)}
.checklist-bail li.a-faire{color:var(--ink-2)}
.checklist-bail-liste{padding:0;margin:6px 0 0}
.checklist-bail li .btn{gap:8px;padding:0;min-height:0;border:0;background:none;color:inherit;font-weight:400;font-size:.85em;box-shadow:none}
.checklist-bail li .btn:hover span{text-decoration:underline}
.u-color-danger{color:var(--danger)}
.u-color-ok{color:var(--proof)}
.logo-apercu{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:inline-flex;max-width:260px}
.logo-apercu img{max-width:100%;max-height:80px;display:block}
.inscription-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.inscription-branche{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.inscription-branche span{display:flex;flex-direction:column;gap:2px}
.inscription-branche small{color:var(--t);font-size:.78rem;line-height:1.3}
.inscription-branche.active{border-color:var(--brand);background:var(--brand-soft)}
.profil-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profil-option{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.profil-option span{display:flex;flex-direction:column}
.profil-option small{color:var(--t);font-size:.78rem}
.nav-bascule{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 12px;font-size:.8rem}
@media (max-width:560px){.inscription-branches,.profil-choix{grid-template-columns:1fr}}
.inscription-branche svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.espaces-switch{display:inline-flex;gap:2px;margin-left:12px;padding:2px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--brand-tint)}
.espaces-switch form{display:inline}
.espaces-switch a,.espaces-switch button{display:inline-block;padding:4px 12px;border:0;border-radius:var(--r-pill);background:none;color:var(--t);font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer}
.espaces-switch .actif{background:var(--brand);color:#fff}
@media (max-width:560px){.espaces-switch{margin-left:6px}.espaces-switch a,.espaces-switch button{padding:4px 8px;font-size:.75rem}}
.carte-grappe{min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--brand);color:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer}
.u-text-transform-uppercase{text-transform:uppercase}
.u-color-warn{color:var(--warn)}
.partenaire-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.7rem;font-weight:700;letter-spacing:.08em}
.code-saisie{font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.partenaire-qr{width:150px;height:150px}
.partenaire-qr svg{width:100%;height:100%}
.est-grise{opacity:.45}
.u-overflow-wrap-anywhere{overflow-wrap:anywhere;word-break:break-all}
.partenaire-cadre{max-width:920px;margin:0 auto}
.public-cadre:has(.partenaire-cadre){max-width:960px}
@media print{.sans-impression,.langues-barre,.probleme-bouton,.pied-legal{display:none!important}}
/* ---- v2.24 : direction calme. Barre latérale claire pour le bailleur, sept entrées, onglets de section, cartes
sans ombre portée, intitulés en casse normale, une action principale par ligne. L'admin garde sa barre sombre. ---- */
body:not(.admin) .sidebar{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px}
body:not(.admin) .app{background:linear-gradient(90deg,var(--surface) 0 calc(var(--sidebar-w) - 1px),var(--line) calc(var(--sidebar-w) - 1px) var(--sidebar-w),var(--bg) var(--sidebar-w))}
body:not(.admin) .sidebar .brand{color:var(--ink)}
body:not(.admin) .sidebar .nav{display:flex;flex-direction:column;gap:2px}
body:not(.admin) .sidebar .nav a{color:var(--ink-2);padding:10px 12px;font-size:.92rem;border-radius:10px}
body:not(.admin) .sidebar .nav a:hover{background:var(--surface-2);color:var(--ink)}
body:not(.admin) .sidebar .nav a.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
body:not(.admin) .sidebar .nav a.active svg{color:var(--brand)}
body:not(.admin) .sidebar .nav .count{background:var(--brand)}
body:not(.admin) .sidebar .nav .count.neutral{background:var(--warn-soft);color:var(--warn-ink-2)}
body:not(.admin) .sidebar .row b{color:var(--ink)} body:not(.admin) .sidebar .row small{color:var(--ink-3)}
body:not(.admin) .nav-bascule{color:var(--ink-3);font-size:.82rem;margin:10px 12px 0;background:none;border:0;padding:0;cursor:pointer}
@media (max-width:800px){body:not(.admin) .app{background:var(--bg)}}
.onglets-section{display:flex;gap:4px;padding:4px;margin:-4px 0 22px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.onglets-section::-webkit-scrollbar{display:none}
.onglets-section a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap;text-decoration:none;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.onglets-section a:hover{color:var(--ink);background:rgba(255,255,255,.7);text-decoration:none}
.onglets-section a.on{color:var(--brand);background:#fff;box-shadow:var(--sh-1)}
.onglets-section a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.onglets-section a .cadenas svg{width:13px;height:13px}
.demarrage-mini{display:flex;flex-direction:column;gap:10px;margin:8px 4px 10px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:.84rem}
.demarrage-mini:hover{background:var(--surface-2)}
.demarrage-mini .dm-tete{display:flex;align-items:center;gap:12px}
.demarrage-mini .dm-tete b{display:block;color:var(--ink);font-size:.9rem}
.demarrage-mini .dm-tete small{display:block;color:var(--ink-3);font-size:.8rem}
.demarrage-mini p{margin:0;line-height:1.45}
.dm-anneau{width:44px;height:44px;flex:none}
.dm-anneau .dm-fond{fill:none;stroke:var(--line);stroke-width:5}
.dm-anneau .dm-plein{fill:none;stroke:var(--proof);stroke-width:5;stroke-linecap:round;transition:stroke-dasharray .5s var(--ease)}
.dm-anneau text{font-size:12px;font-weight:700;fill:var(--ink);font-family:var(--font)}
.admin .demarrage-mini{display:none}
.card{box-shadow:none;border-color:var(--line-carte);border-radius:14px}
.card.hover:hover{box-shadow:var(--sh-2);transform:none}
.card-h{padding:18px 20px 0}
.card-b{padding:16px 20px 20px}
.card-f{border-radius:0 0 14px 14px}
.card-title .ic{width:32px;height:32px;border-radius:9px}
.kpi{padding:18px 20px}
.kpi .label{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:500;color:var(--ink-3)}
.kpi .value{font-weight:700;font-size:1.7rem;letter-spacing:-.02em}
.table th{text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:600;color:var(--ink-3)}
.table tbody tr:hover{background:var(--surface-2)}
.task{border-radius:12px;padding:12px 16px}
.task:hover{transform:none;box-shadow:none;border-color:var(--line-hover);background:var(--surface-2)}
.task .sev{display:none}
.task .ico{width:36px;height:36px;border-radius:10px}
.btn:hover{transform:none}
.btn-secondary{border-color:var(--line-bouton)}
.page-head{margin-bottom:18px}
.page-head h1{font-size:1.65rem}
.content>*{animation-duration:220ms}
.icone-type{width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;flex:none}
.icone-type svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icone-type.grande{width:60px;height:60px;border-radius:16px;background:var(--brand-soft);color:var(--brand-ink)}
.icone-type.grande svg{width:30px;height:30px}
.unite-pastille{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:7px 11px;font-size:.82rem;border:1px solid;line-height:1.3;text-decoration:none!important}
.unite-pastille::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.unite-pastille b{font-weight:600}
.unite-pastille.louee{background:var(--proof-soft-2);border-color:var(--proof-line-2);color:var(--proof-ink-2)}
.unite-pastille.louee::before{background:var(--proof)}
.unite-pastille.retard{background:var(--danger-soft);border-color:var(--danger-line-2);color:var(--danger-ink-2)}
.unite-pastille.retard::before{background:var(--danger)}
.unite-pastille.vide{background:#fff;border-color:var(--line-3);border-style:dashed;color:var(--ink-5)}
.unite-pastille.vide::before{background:var(--ink-4)}
.unite-pastille.travaux{background:var(--warn-soft);border-color:var(--warn-line-2);color:var(--warn-ink-3)}
.unite-pastille.travaux::before{background:var(--warn)}
.segment{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px}
.segment a,.segment button{border:0;background:none;font:inherit;font-weight:600;font-size:.86rem;padding:7px 14px;border-radius:8px;color:var(--ink-3);cursor:pointer;text-decoration:none!important;min-height:34px;display:inline-flex;align-items:center}
.segment .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.barre-onglets{display:none}
@media (max-width:800px){
.barre-onglets{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.barre-onglets a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--ink-3);padding:6px 0;min-height:48px;text-decoration:none!important;position:relative}
.barre-onglets a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.barre-onglets a.on{color:var(--brand)}
.barre-onglets .count{position:absolute;top:2px;left:calc(50% + 6px);background:var(--brand);color:#fff;font-size:.62rem;font-weight:700;border-radius:99px;padding:1px 6px}
.content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.probleme-bouton{bottom:calc(80px + env(safe-area-inset-bottom))!important}
.toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
.table.en-cartes{min-width:0}
.table.en-cartes thead{display:none}
.table.en-cartes tbody,.table.en-cartes tr,.table.en-cartes td{display:block}
.table.en-cartes tr{padding:12px 14px;border-bottom:1px solid var(--line-2)}
.table.en-cartes td{padding:2px 0;border:0;text-align:left!important}
.table.en-cartes td[data-l]::before{content:attr(data-l);display:block;font-size:.74rem;color:var(--ink-3);font-weight:600}
.onglets-section{margin:-4px 0 16px;width:auto}
.in-app .barre-onglets{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
.txt-ok{color:var(--proof)}
.segments{display:flex;gap:3px}
.segments span{flex:1;height:8px;border-radius:4px;background:var(--line-3)}
.segments span.plein{background:var(--proof)}
.progress{height:8px}
.empty .big svg{stroke:var(--ink-4)}
.carte-bandeau{position:relative;overflow:hidden}
.carte-bandeau .carte-zone{height:260px!important;min-height:0!important;border-radius:14px}
.carte-bandeau .carte-agrandir{position:absolute;right:12px;bottom:12px;z-index:2}
.carte-communes{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap}
.carte-communes>svg{width:22px;height:22px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carte-communes-liste{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.carte-communes .chip{cursor:default}
.liste-biens{overflow:hidden}
.bien-ligne{display:flex;gap:16px;padding:16px 20px;border-top:1px solid var(--line-2);align-items:flex-start}
.bien-ligne:first-child{border-top:0}
.bien-ligne .icone-type{overflow:hidden;text-decoration:none}
.bien-ligne .icone-type img.bien-vignette{width:44px;height:44px;object-fit:cover;border-radius:12px;margin:0}
.bien-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.bien-ligne-tete{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bien-ligne-tete .bien-lien{color:var(--ink);font-size:1rem}
.bien-ligne-unites{display:flex;gap:8px;flex-wrap:wrap}
.badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:800px){.bien-ligne{padding:14px}.carte-bandeau .carte-zone{height:200px}}
.onglets-fiche{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.onglets-fiche::-webkit-scrollbar{display:none}
.onglets-fiche button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:11px 14px;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink-3);cursor:pointer;white-space:nowrap;min-height:44px}
.onglets-fiche button:hover{color:var(--ink)}
.onglets-fiche button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.panneau-fiche{animation:fade-up var(--t) var(--ease)}
.resume-bien .kpi .value{font-size:1.35rem}
@media (max-width:800px){.onglets-fiche{margin:0 -14px 16px;padding:0 10px}}
.icone-titre{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--warn-soft);color:var(--warn);vertical-align:middle;margin-right:6px}
.icone-titre svg,.lang-pop .ok svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lang-pop .ok svg{width:16px;height:16px}
@media (max-width:800px){
.task{gap:10px 12px}
.task>.row{flex:1 1 100%;justify-content:flex-start!important;gap:6px;padding-left:48px}
.task>.row form{display:inline-flex}
.task .body small{font-size:.82rem}
.page-head h1{font-size:1.3rem}
}
@media (max-width:800px){
.table.en-cartes td.num,.table.en-cartes td.th-r{text-align:left}
.table.en-cartes td:empty{display:none}
.table.en-cartes tr{display:flex;flex-wrap:wrap;gap:4px 16px}
.table.en-cartes td{flex:1 1 40%;min-width:0}
.table.en-cartes td:first-child{flex-basis:100%}
.table.en-cartes td .row{justify-content:flex-start!important}
}
.budget-phrase{font-size:1.15rem;font-weight:600;line-height:1.45}
.budget-detail{display:flex;gap:8px 22px;flex-wrap:wrap;color:var(--ink-3);font-size:.9rem}
.budget-detail b{color:var(--ink)}
.budget-plus>summary{padding:8px 2px;margin-bottom:8px}
.bail-auto{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bail-auto button.lien-resume{background:none;border:0;padding:0}
.automatique-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.automatique-liste li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-2)}
.automatique-liste li small{white-space:nowrap}
.credits-synthese{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.credits-synthese div{display:flex;flex-direction:column}
@media (max-width:800px){.credits-synthese{grid-template-columns:1fr}}
.questionnaire{max-width:780px;display:flex;flex-direction:column;gap:16px}
.questionnaire h2{font-size:1.15rem;margin:0}
.questionnaire h3{font-size:.95rem;margin:6px 0 0;color:var(--ink-2)}
.pas-etapes{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.pas-etapes li{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-3);padding:4px 10px 4px 4px;border-radius:99px;background:var(--line-2)}
.pas-etapes .pas-n{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-weight:700;font-size:.72rem}
.pas-etapes li.fait{color:var(--ink-2)}
.pas-etapes li.fait .pas-n{background:var(--proof-soft);color:var(--proof)}
.pas-etapes li.en-cours{background:var(--brand);color:#fff}
.pas-etapes li.en-cours .pas-n{color:var(--brand)}
.pas-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pb-ligne-rue{grid-template-columns:2fr 1fr}
.pb-court{max-width:120px}
.pb-moyen{max-width:220px}
.choix-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.choix-type{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:.86rem;font-weight:600;text-align:center;background:#fff}
.choix-type input{position:absolute;opacity:0;pointer-events:none}
.choix-type:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.choix-type:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.segments-choix{display:flex;gap:18px;flex-wrap:wrap}
.recap{display:flex;flex-direction:column;margin:0}
.recap > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.recap dt{color:var(--ink-3)}
.recap dd{margin:0;text-align:right;font-weight:600}
@media (max-width:640px){.choix-types{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-ligne-rue{grid-template-columns:1fr}.pas-etapes .pas-l{display:none}.pas-etapes li.en-cours .pas-l{display:inline}}
.packs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lot-prix{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.lot-bien{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.lot-unite{gap:8px;flex-wrap:wrap;padding-left:12px}
.aller-contenu{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--r-xs);background:var(--brand);color:#fff;font-weight:600;text-decoration:none}
.aller-contenu:focus{top:12px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
[id]{scroll-margin-top:calc(var(--topbar-h) + 16px)}
.content{padding-bottom:88px}
.montant,.num{white-space:nowrap}
.bulle-i{position:relative}.bulle-i::after{content:'';position:absolute;inset:-14px}
.task{flex-wrap:wrap}
.task .body{flex:1 1 260px}
.probleme-bouton{padding:10px;opacity:.92}
.probleme-bouton span{display:none}
.probleme-bouton:hover span,.probleme-bouton:focus-visible span{display:inline}
.probleme-bouton:hover,.probleme-bouton:focus-visible{opacity:1}
/* 3.14.13 (P4) : hors espace bailleur, sur téléphone, un lien « Aide » à icône d'aide, dans le flux en bas de page. */
.probleme-bouton i{display:inline-flex;font-style:normal}
.probleme-bouton span.pb-court,.probleme-bouton i.pb-ic-aide{display:none}
@media (max-width:640px){
.probleme-bouton.probleme-flux{position:static;display:flex;width:max-content;margin:12px auto 16px;padding:10px 18px;min-height:44px;opacity:1;box-shadow:none}
.probleme-bouton.probleme-flux span.pb-long,.probleme-bouton.probleme-flux i.pb-ic-alerte{display:none}
.probleme-bouton.probleme-flux span.pb-court{display:inline}
.probleme-bouton.probleme-flux i.pb-ic-aide{display:inline-flex}
}
@media (max-width:640px){.card-h{flex-wrap:wrap;gap:8px}.card-h>.actions,.card-h>.row{flex-wrap:wrap}}
.demarrage-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
@media (max-width:640px){.demarrage-actions{align-items:flex-start;margin-left:40px;text-align:left}.demarrage-actions .btn{margin-left:0}}
.aide-tuile{display:flex;flex-direction:column;gap:6px;padding:18px 20px;text-decoration:none;color:var(--ink);transition:box-shadow var(--t) var(--ease),border-color var(--t)}
.aide-tuile:hover{box-shadow:var(--sh-2);border-color:var(--brand);text-decoration:none}
.aide-tuile .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.aide-tuile .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.marque-formule{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:.7rem;font-weight:700;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.nav a .marque-formule{margin-left:auto}
.cadenas{background:var(--warn-soft);border-radius:999px;padding:2px 5px;margin-left:6px}
.zone-verrouillee{position:relative}
.zone-flou{filter:blur(5px) saturate(.6);opacity:.55;pointer-events:none;user-select:none;max-height:900px;overflow:hidden}
.zone-cta{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:80px}
.zone-cta .card{max-width:440px;width:100%;box-shadow:var(--sh-3,var(--sh-2));text-align:center}
.zone-cta .card-b{display:flex;flex-direction:column;align-items:center;gap:10px}
.zone-cta .cadenas{padding:10px;margin:0}
.zone-cta .cadenas svg{width:24px;height:24px}
.carte-passage{margin:8px 8px 0;padding:14px;border-radius:14px;background:linear-gradient(160deg,var(--brand-soft),#fff);border:1px solid var(--line)}
.carte-passage b{display:block;font-size:.92rem}
.carte-passage ul{margin:8px 0 10px;padding-left:18px;font-size:.82rem;color:var(--ink-2)}
.carte-passage small{color:var(--ink-3)}
.sens-bailleur{display:inline-flex;vertical-align:-2px;margin-right:4px;color:var(--brand)}
.sens-bailleur svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transform:rotate(-45deg)}
.composer-form textarea{border-radius:18px;padding:12px 16px;resize:vertical;min-height:52px}
.detail-demande .fil{padding:20px 22px}
.msg.me .meta{color:rgba(255,255,255,.85)}
.msg.them{box-shadow:none}
.reg-jour{position:sticky;top:calc(var(--topbar-h) + 4px);z-index:2;align-self:flex-start;margin:14px 0 4px;padding:3px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--ink-2)}
.reg-jour:first-child{margin-top:0}
.registre-guide-liste{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--ink-2)}
.import-contact{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2)}
.import-contact .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.import-contact-fichier{cursor:pointer}
.pd-tete{display:flex;align-items:center;gap:14px}
.pd-anneau{width:64px;height:64px;flex:none}
.pd-anneau .pd-fond{fill:none;stroke:var(--line-2);stroke-width:6}
.pd-anneau .pd-plein{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round}
.pd-anneau text{font:700 13px var(--font);fill:var(--ink)}
.palier-solide .pd-plein,.palier-complet .pd-plein{stroke:var(--proof)}
.pd-palier{background:var(--brand-soft);color:var(--brand-ink)}
.palier-solide .pd-palier,.palier-complet .pd-palier{background:var(--proof-soft);color:var(--proof-ink)}
.pd-suggestions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-suggestions li{display:flex;flex-direction:column;gap:1px}
.pb-tete{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.pb-barre{min-width:120px}
.palier-solide .pb-barre i,.palier-complet .pb-barre i{background:var(--proof)}
.pb-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 20px}
.pb-liste li{display:flex;align-items:center;gap:8px;font-size:.9rem}
.pb-liste li.fait{color:var(--ink-3)}
.pb-coche{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.pb-liste li.fait .pb-coche{background:var(--proof);border-color:var(--proof);color:#fff}
.pb-coche svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}
.pb-liste small{margin-left:auto}
@media (max-width:640px){.pb-tete{grid-template-columns:1fr}}
.bien-dossier{font-size:.75rem;color:var(--ink-3)}
.auto-proposition{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:4px;padding:8px 12px;border-radius:10px;background:var(--brand-tint);color:var(--ink-2)}
.auto-proposition svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2;flex:none}
.auto-proposition small{flex:1}
.unite-ligne{flex-wrap:wrap}
.unite-corps{flex:1 1 200px}
.unite-actions{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.registre-filtres-ligne > select.select{flex:0 1 220px;width:auto}
.registre-guide summary svg{width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2;vertical-align:-3px;margin-right:4px}
.carte-passage-prix{display:block;text-align:center;margin-top:6px}
@media (max-width:640px){.registre-filtres-ligne > select.select{flex:1 1 100%}}
.surbrillance{animation:surbrillance 2.4s var(--ease)}
@keyframes surbrillance{0%,40%{box-shadow:0 0 0 3px var(--brand),0 0 0 8px var(--brand-soft)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.surbrillance{animation:none;outline:3px solid var(--brand);outline-offset:2px}}
.pb-suivant{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--brand-soft);border-radius:10px;padding:10px 14px}
.pb-a-faire li{border:1px dashed var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px}
.pb-a-faire a{font-weight:600}
.pb-vide{border-color:var(--warn)}
.pb-faits{color:var(--ink-2)}
.pb-faits li{font-size:.85rem}
.onglet-pastille{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--warn);color:#fff;font-size:.72rem;font-weight:700;vertical-align:1px}
[data-a-completer]{position:relative}
.marque-a-completer{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.sinistre-envoi{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px}
.sinistre-envoi b{display:flex;align-items:center;gap:6px}
.sinistre-envoi b svg{width:16px;height:16px}
.contacts-assurance{display:flex;flex-direction:column;gap:6px}
.contact-assurance{border-top:1px solid var(--line);padding-top:6px}
.contact-assurance:first-child{border-top:0;padding-top:0}
.qr-unite-ligne{border-top:1px solid var(--line);padding-top:6px}
.etat-enreg{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;margin-left:8px;align-self:center}
.btn-block + .etat-enreg{display:flex;margin:6px 0 0}
.etat-enreg::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.etat-enreg.modifie{color:var(--warn)}
.etat-enreg.modifie::before{background:var(--warn)}
.etat-enreg.fait{color:var(--proof)}
.etat-enreg.fait::before{background:var(--proof)}
.btn.a-enregistrer{box-shadow:0 0 0 3px var(--warn-soft)}
.m-f .etat-enreg{margin-right:auto;margin-left:0}
.adresse-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.adresse-grille .field{grid-column:span 2;min-width:0}
.adresse-grille .field:first-child{grid-column:span 4}
.adresse-grille .field:nth-child(5){grid-column:span 4}
.adresse-grille .field:nth-child(2),.adresse-grille .field:nth-child(3){grid-column:span 1}
@media (max-width:640px){.adresse-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.adresse-grille .field,.adresse-grille .field:first-child,.adresse-grille .field:nth-child(5){grid-column:span 1}.adresse-grille .field:first-child,.adresse-grille .field:nth-child(5){grid-column:span 2}}
.pb-a-faire{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pb-a-faire li{flex-wrap:wrap;row-gap:2px}
.pb-a-faire li a{flex:1 1 0;min-width:0}
.pb-a-faire li small{margin-left:26px;width:100%}
.edl-parcours{position:sticky;top:64px;z-index:20}
.edl-progression{display:flex;align-items:center;gap:10px}
.edl-progression .progress{flex:1}
.edl-etapes-nav{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.edl-etape-bouton{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px 6px 6px;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:36px}
.edl-etape-bouton:hover{border-color:var(--brand-tint);color:var(--ink)}
.edl-etape-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:.75rem}
.edl-etape-bouton.fait .edl-etape-n{background:var(--proof);color:#fff}
.edl-etape-bouton.actif{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.edl-etape-bouton.actif .edl-etape-n{background:var(--brand);color:#fff}
.edl-etape-compte{color:var(--ink-3);font-weight:500}
.edl-etape-pied{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
@media (max-width:800px){.edl-parcours{top:56px}.edl-parcours .card-b{padding:12px}}
.edl-etape[hidden],[data-edl-avec-final][hidden],.reprise-historique[hidden]{display:none!important}
.agenda-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.agenda-chiffre{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;border-top:3px solid var(--brand)}
.agenda-chiffre b{font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums}
.agenda-chiffre span{font-size:.85rem;color:var(--ink-3);font-weight:600}
.agenda-chiffre.danger{border-top-color:var(--danger)}
.agenda-chiffre.warn{border-top-color:var(--warn)}
.agenda-chiffre.neutre{border-top-color:var(--line-2)}
.agenda-filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.agenda-pastilles{display:flex;flex-wrap:wrap;gap:6px}
.agenda-pastille{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer;min-height:36px}
.agenda-pastille.actif{background:var(--brand);border-color:var(--brand);color:#fff}
.agenda-filtre-bien{max-width:320px}
.agenda-groupe-titre{display:flex;align-items:center;gap:8px;font-size:.95rem;margin:0 0 8px;color:var(--ink-2)}
.agenda-liste{list-style:none;margin:0;padding:0}
.agenda-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:start;padding:16px 18px;border-top:1px solid var(--line)}
.agenda-item:first-child{border-top:0}
.agenda-date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--surface-2);padding:8px 4px;line-height:1.1;border:1px solid var(--line)}
.agenda-date b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.agenda-date span{font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--ink-3)}
.agenda-date small{font-size:.68rem;color:var(--ink-3)}
.agenda-item.danger .agenda-date{background:var(--danger-soft);border-color:transparent}
.agenda-item.danger .agenda-date b,.agenda-item.danger .agenda-date span{color:var(--danger)}
.agenda-item.warn .agenda-date{background:var(--warn-soft);border-color:transparent}
.agenda-corps{display:flex;flex-direction:column;gap:4px;min-width:0}
.agenda-titre{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.agenda-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.85rem;color:var(--ink-3)}
.agenda-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-2px}
.agenda-delai{font-weight:700}
.agenda-delai.danger{color:var(--danger)}
.agenda-delai.warn{color:var(--warn)}
.agenda-que-faire{color:var(--ink-2)}
.agenda-actions{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.agenda-actions .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.agenda-plus{position:relative}
.agenda-plus>summary{list-style:none;cursor:pointer}
.agenda-plus>summary::-webkit-details-marker{display:none}
.agenda-plus-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:280px}
.agenda-item[hidden],.agenda-groupe[hidden],.agenda-aucun[hidden]{display:none!important}
@media (max-width:800px){.agenda-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}.agenda-item{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px}.agenda-actions{grid-column:1 / -1;justify-content:flex-start}.agenda-plus-menu{left:0;right:auto;min-width:0;width:min(320px,86vw)}}
.formules-grille thead th{position:sticky;top:0;background:var(--surface);z-index:2;vertical-align:bottom}
.formules-grille th.recommande,.formules-grille td.recommande{background:var(--brand-tint)}
.formules-grille thead th.recommande{box-shadow:inset 0 3px 0 var(--brand)}
.formules-theme th{background:var(--surface-2);text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding-top:10px;padding-bottom:6px}
.formules-grille td.non .cadenas svg{width:16px;height:16px;stroke:var(--ink-4);fill:none;stroke-width:1.9}
.formules-grille td:first-child{font-weight:500}
.osm-repere-boite{background:none;border:0}
.osm-repere{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(15,23,42,.35);color:#fff;font-size:.72rem;font-weight:700;box-sizing:border-box}
.carte-zone.placement{cursor:crosshair}
.carte-zone .leaflet-popup-content{margin:12px 14px}
.registre-preuves{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.registre-preuves>span{font-size:.85rem;font-weight:600;margin-right:4px}
a.agenda-pastille{text-decoration:none;display:inline-flex;align-items:center}
.registre-avance{margin-top:8px}
.reg-corps mark{background:var(--surligne);color:inherit;border-radius:3px;padding:0 1px}
.agenda-suite{margin:8px auto 0;display:block}
@media (max-width:640px){.edl-parcours-aide{display:none}.edl-parcours{top:56px}}
.indivision-ligne{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:8px;align-items:center;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.table-compacte{margin-top:6px}
.table-compacte td{padding:4px 8px}
tr.ligne-active>td{background:var(--brand-soft)}
.annees-credit{display:flex;flex-direction:column}
.annee-credit-tete,.annee-credit>summary{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:10px 16px}
.annee-credit-tete{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);border-bottom:1px solid var(--line)}
.annee-credit-tete span:not(:first-child),.annee-credit>summary .num{text-align:right;font-variant-numeric:tabular-nums}
.annee-credit{border-bottom:1px solid var(--line)}
.annee-credit>summary{cursor:pointer;list-style:none}
.annee-credit>summary::-webkit-details-marker{display:none}
.annee-credit>summary:hover{background:var(--surface-2)}
.annee-credit.courante>summary{background:var(--brand-soft)}
.annee-credit .table-wrap{padding:0 16px 10px}
@media (max-width:640px){.annee-credit-tete,.annee-credit>summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);font-size:.85rem}.annee-credit-tete span:nth-child(3),.annee-credit-tete span:nth-child(4),.annee-credit>summary span:nth-child(3),.annee-credit>summary span:nth-child(4),.annee-credit-tete span:nth-child(5),.annee-credit>summary span:nth-child(5){display:none}}
/* ======================================================================================================
v3.7 : TABLETTE, BARRE D'ONGLETS, BADGES. Trois points de rupture : bureau (> 1100), tablette (801 à 1100 :
barre latérale réduite aux icônes, contenu sur toute la largeur), téléphone (<= 800 : navigation basse).
====================================================================================================== */
/* ---- La barre d'onglets d'un groupe : une navigation, pas une carte. Bande claire sur toute la largeur, onglet
actif souligné, défilement au doigt avec un fondu sur les bords quand elle déborde (classes posées par ui.js). ---- */
.onglets-section{display:flex;gap:2px;width:100%;max-width:none;margin:-24px -28px 24px;padding:0 20px;box-sizing:content-box;background:var(--surface);border:0;border-bottom:1px solid var(--line);border-radius:0;overflow-x:auto;scrollbar-width:none;position:relative}
.content>.onglets-section{width:calc(100% + 56px)}
.onglets-section a{display:inline-flex;align-items:center;gap:7px;padding:0 12px;min-height:48px;border-radius:0;font-size:.9rem;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;background:none;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.onglets-section a:hover{color:var(--ink);background:none;text-decoration:none}
.onglets-section a.on{color:var(--brand);font-weight:600;background:none;box-shadow:none;border-bottom-color:var(--brand)}
.onglets-section a svg{width:16px;height:16px;opacity:.9}
.onglets-section a.on svg{opacity:1}
/* Le fondu des bords, selon la position du défilement (ui.js pose .defile-gauche et .defile-droite). */
.onglets-section.defile-droite{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.onglets-section.defile-gauche{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.onglets-section.defile-gauche.defile-droite{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
/* Les badges de formule ne figurent plus dans la navigation : seul un cadenas discret signale une fonction fermée. */
.onglets-section .marque-formule,.nav .marque-formule,.btn .marque-formule,.actions .marque-formule{display:none}
.onglets-section .cadenas{color:var(--ink-3)}
.onglets-section a.on .cadenas{color:var(--warn)}
/* Partout ailleurs, la marque de formule est une pastille discrète (icône seule, texte à l'infobulle et au lecteur d'écran). */
.marque-formule{padding:0;width:16px;height:16px;justify-content:center;background:none;color:var(--ink-3);font-size:0;border:1px solid var(--line);border-radius:50%}
.marque-formule::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.marque-formule .sr-only{font-size:1rem}
/* Les onglets internes d'une fiche (bien, bail, crédit) : soulignés dans la carte, plus petits, pour ne jamais se confondre
avec la barre du groupe. */
.tabs{gap:0;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 14px;font-size:.88rem;white-space:nowrap}
.tabs a .count{margin-left:6px}
/* ---- Tableaux larges : ils défilent dans leur carte, jamais la page. ---- */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.card>.table-wrap,.card-b>.table-wrap{max-width:100%}
.content,.main{overflow-x:clip}
/* ---- Fil d'Ariane et recherche : sur une ligne, quelle que soit la largeur. ---- */
.topbar .crumbs{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.topbar .recherche-globale{flex:0 1 320px;min-width:140px}
.topbar .recherche-globale .input{width:100%;min-width:0}
/* ---- Tablette (801 à 1100 px) : barre latérale réduite aux icônes (68 px), contenu sur toute la largeur. ---- */
@media (min-width:801px) and (max-width:1100px){
:root{--sidebar-w:68px}
body:not(.admin) .sidebar,.sidebar{padding:14px 10px;gap:2px;overflow:visible}
.sidebar .brand{justify-content:center;padding:4px 0 14px;font-size:0;gap:0}
.sidebar .brand .logo{width:36px;height:36px}
body:not(.admin) .sidebar .nav a,.sidebar .nav a{justify-content:center;padding:11px 0;gap:0;position:relative}
.sidebar .nav a>span:not(.count){display:none}
.sidebar .nav .count{position:absolute;top:4px;right:6px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:.62rem;line-height:16px;text-align:center}
.sidebar .nav a .cadenas,.sidebar .nav a .marque-formule{display:none}
/* Le nom du groupe apparaît au survol, à droite de l'icône. */
.sidebar .nav a[title]:hover::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;z-index:60;pointer-events:none;box-shadow:var(--sh-2)}
.sidebar .nav-bascule,.sidebar .carte-passage,.sidebar .demarrage-mini,.sidebar .plan-card,.sidebar>.row{display:none}
.topbar{padding:0 16px;gap:10px}
.topbar .espaces-switch{display:none}
.content{padding:20px}
.onglets-section{margin:-20px -20px 20px;padding:0 12px}
.content>.onglets-section{width:calc(100% + 40px)}
.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .value{font-size:1.5rem}
.split,.deux-colonnes{grid-template-columns:1fr}
.table{font-size:.88rem}
}
@media (max-width:900px) and (min-width:801px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- Téléphone : la barre d'onglets du groupe colle au bord et défile. ---- */
@media (max-width:800px){
.onglets-section{margin:-16px -14px 16px;padding:0 8px;gap:0}
.content>.onglets-section{width:calc(100% + 28px)}
.onglets-section a{padding:0 11px;min-height:46px;font-size:.86rem}
}
/* Espaces artisan et locataire : l'en-tête (marque + actions) passe sur deux lignes et centre ses actions sur téléphone. */
.public-marque{flex-wrap:wrap;row-gap:10px}
.public-marque>.row{flex-wrap:wrap;justify-content:center;max-width:100%}
.public-marque .brand{min-width:0;flex-wrap:wrap;justify-content:center;text-align:center}
@media (max-width:800px){.public-marque{flex-direction:column;align-items:center}.public-cadre{padding:20px 12px 40px}}
/* Boutons « Continuer avec Google / Apple » : logos officiels en couleur (règles de marque Google et Apple). */
.btn-externe{gap:10px;font-weight:600}
.btn-externe .logo-externe{width:18px;height:18px;flex:none;stroke:none}
.btn-google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.btn-google:hover{background:#f8f9fa;color:#1f1f1f;border-color:#1f1f1f}
.btn-apple{background:#000;color:#fff;border:1px solid #000}
.btn-apple:hover{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.btn-apple .logo-externe{width:19px;height:19px;margin-top:-2px}
/* L'espace artisan vide (v3.7.5) : une carte centrée qui explique l'espace et donne la bonne sortie. */
.artisan-vide{text-align:center;padding:12px 8px}
.artisan-vide h1{font-size:1.45rem;margin:0}
.artisan-vide .muted{max-width:440px;margin:0 auto;line-height:1.55}
.artisan-vide-ic{width:56px;height:56px;margin:0 auto;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.artisan-vide-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.artisan-vide-choix{max-width:360px;margin:8px auto 0;display:flex;flex-direction:column;gap:10px}
.mention-externe{margin:2px 0 0;text-align:center;line-height:1.45}
/* v3.12.0 : la page Licences vend ce qui existe (audit des licences) */
.achat .accroche{font-size:.92rem;color:var(--brand-ink);line-height:1.35}
.achat .pour-qui{font-size:.82rem;color:var(--ink-3);line-height:1.4;margin-top:-4px}
.quotas{list-style:none;margin:2px 0 0;padding:8px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:2px}
.quotas small{color:var(--ink-3)}
.carte-bientot{border-style:dashed;background:var(--surface-2)}
.carte-bientot .kpi{color:var(--ink-3)}
.vente-moment{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding:8px 12px;border-radius:var(--r-sm);background:var(--brand-tint);border:1px solid var(--brand-line);font-size:.86rem;color:var(--ink-2)}
.vente-moment .badge{flex:none}
.vente-moment a{font-weight:600}
.automatisme-grise{opacity:.62}
.automatisme-grise input{pointer-events:none}
.gere-avec{display:block;text-align:center;margin:24px 0 8px;font-size:.8rem;color:var(--ink-3)}
.gere-avec a{color:var(--ink-3);font-weight:600}
/* Audit d'accessibilité 3.12.1 : un lien dans un texte se distingue autrement que par la couleur. */
.alert a:not(.btn),.card-b p a:not(.btn),.leaflet-control-attribution a{text-decoration:underline!important;text-underline-offset:2px}
/* Accessibilité (3.13.1) : un lien dans un texte se distingue autrement que par la couleur (WCAG 1.4.1). */
p a:not([class]),small a:not([class]),.alert div a:not([class]),.hint a:not([class]),li.a-faire span a:not([class]){text-decoration:underline;text-underline-offset:2px}
/* 3.14.0 lot E : état des lieux hors ligne et signatures sans e-mail. */
.modal.modal-large{width:min(720px,94vw)}
.vignette.en-attente{outline:2px dashed var(--warn);outline-offset:2px}
.qr-signature svg{display:block;width:min(70vw,280px);height:auto;margin:0 auto}
.u-text-center{text-align:center}
[data-hors-ligne-etat]{white-space:normal}
.onglets-fiche a{border-bottom:2px solid transparent;margin-bottom:-1px;padding:11px 14px;font-weight:600;font-size:.92rem;color:var(--ink-3);white-space:nowrap;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.onglets-fiche a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
/* 3.14.0 : code de langue à la place d'un drapeau national. */
.flag-code{display:inline-grid;place-items:center;font-size:.6rem;font-weight:700;letter-spacing:.02em;line-height:1;color:#0F172A;background:#fff}
/* 3.14.0 : liste des baux sur téléphone : l'e-mail (souvent long) se coupe dans sa cellule au lieu de déborder sur le loyer. */
.table[data-test="baux-liste"] td a[href^="mailto:"],.table[data-test="baux-liste"] td a[href^="tel:"]{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;vertical-align:top}
@media (max-width:720px){.table[data-test="baux-liste"] td a[href^="mailto:"]{display:block}.table[data-test="baux-liste"] td.num{white-space:nowrap}}
/* 3.14.0 lot C : téléphone avec sélecteur de pays */
.telephone-pays{flex-wrap:nowrap}
.telephone-pays .select{max-width:9.5rem;flex:0 0 auto}
.telephone-pays .input{flex:1 1 auto;min-width:0}
/* 3.14.0 lot F : bail écrit (lien de retour vers le bien). */
.lien-retour{display:inline-block;margin-bottom:4px;font-size:.9rem}
/* 3.14.1 : audit ergonomique PC, tablette, téléphone (docs/AUDIT-3.14.0-ERGONOMIE.md). */
/* Sélecteur de langue : un globe et le code (plus « FR FR ») ; sur téléphone, le code seul. */
.lang-btn>svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 16px}
@media (max-width:800px){.topbar .lang-btn .lang-code{display:inline}.topbar .lang-btn>svg{display:none}}
/* Fil d'Ariane : sur téléphone, le titre de la page seul (« Espace bailleur › Auj… » ne disait rien). */
@media (max-width:600px){.crumbs-racine{display:none}.topbar .crumbs b{font-size:.95rem}}
/* Indicateurs (cartes .kpi) : deux par ligne sur téléphone au lieu d'une pile pleine largeur ; le dernier, s'il est seul, prend la ligne. */
@media (max-width:600px){
.grid:has(>.card.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.grid:has(>.card.kpi)>.card.kpi:last-child:nth-child(odd){grid-column:1/-1}
.grid>.card.kpi{padding:12px 14px}
.grid>.card.kpi .value{font-size:1.3rem;line-height:1.25}
.grid>.card.kpi .label{font-size:.78rem}
}
/* Tablette portrait (801-900 px : iPad Air, iPad Pro 11) : les tableaux passent en cartes comme sur téléphone (colonnes coupées à 820 px). */
@media (min-width:801px) and (max-width:900px){
.table.en-cartes{min-width:0}
.table.en-cartes thead{display:none}
.table.en-cartes tbody,.table.en-cartes tr,.table.en-cartes td{display:block}
.table.en-cartes tr{padding:12px 14px;border-bottom:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:4px 16px}
.table.en-cartes td{padding:2px 0;border:0;text-align:left!important;flex:1 1 22%;min-width:0}
.table.en-cartes td:first-child{flex-basis:100%}
.table.en-cartes td:empty{display:none}
.table.en-cartes td[data-l]::before{content:attr(data-l);display:block;font-size:.74rem;color:var(--ink-3);font-weight:600}
.table.en-cartes td .row{justify-content:flex-start!important}
}
/* Licences : la grille des formules reste un tableau compact sur téléphone (30 lignes au lieu de 30 cartes) ; prix des en-têtes masqués. */
@media (max-width:600px){
.formules-grille{min-width:0!important;width:100%;table-layout:fixed}
.formules-grille th:first-child,.formules-grille td:first-child{width:auto;overflow-wrap:anywhere}
.formules-grille thead th:not(:first-child){width:74px;font-size:.78rem}
.formules-grille thead th small{display:none}
.formules-grille th,.formules-grille td{padding:8px 6px;font-size:.84rem}
.licences-couvrir .btn{white-space:normal;text-align:left;height:auto;min-height:40px;line-height:1.3;padding-top:8px;padding-bottom:8px}
}
/* Cibles tactiles : pied légal, résumés repliables, liens des fiches (WCAG 2.5.8, 24 px au moins ; 40 px visés). */
@media (pointer:coarse),(max-width:1024px){
.pied-legal a{display:inline-block;padding:6px 2px}
details>summary{min-height:32px;display:flex;align-items:center;gap:6px}
}
/* Bandeau de démonstration : une seule ligne sur téléphone (il prenait trois lignes, soit 100 px de chaque écran). */
@media (max-width:600px){
.bandeau-demo{gap:6px 10px;padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top));font-size:.78rem}
.bandeau-demo>span b{display:none}
.bandeau-demo .demo-recommencer button{padding:4px 10px;min-height:32px}
.bandeau-demo a{display:inline-flex;align-items:center;min-height:32px}
}
/* Cartes « À faire » sur téléphone : l'icône reste à gauche du titre, et les boutons s'alignent sur le texte (avant : icône
au-dessus, texte pleine largeur, boutons décalés de 48 px). */
@media (max-width:600px){
.task .body{flex:1 1 calc(100% - 52px)}
.task>.row{padding-left:48px}
}
/* Pied légal sur téléphone et tablette portrait : il passait sous la barre du bas, « Conditions de vente », « Confidentialité »
et « Cookies » n'étaient atteignables sur aucune page. La réserve de la barre passe du contenu au pied. */
@media (max-width:800px){
body:has(>.barre-onglets) .main>.content{padding-bottom:24px}
body:has(>.barre-onglets) .main>.pied-legal{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
/* Dans l'application mobile le pied légal est masqué : la réserve reste sur le contenu (sinon le dernier bouton passe sous la barre). */
body.in-app:has(>.barre-onglets) .main>.content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* Cases à cocher hors libellé (préférences de notification, tableaux) : 22 px sur écran tactile au lieu de 13 px. */
@media (pointer:coarse),(max-width:1024px){
td>input[type=checkbox],td>input[type=radio]{width:24px;height:24px}
.field .hint a{display:inline-block;padding:4px 0}
}
/* Liens de retour (« ← Crédits et dépenses ») : 32 px de haut sur écran tactile. */
@media (pointer:coarse),(max-width:1024px){.lien-retour,.lien-resume{display:inline-flex;align-items:center;min-height:32px}}
/* 3.14.3 : parcours sur téléphone et dans l'application mobile (docs/PARCOURS-UTILISATEUR.md). */
/* En-tête : la cloche des notifications (avant : une icône « i » qu'on prenait pour de l'aide). */
.dd-langues{display:none}
.nav-rapides{display:none}
@media (max-width:800px){
/* Un seul bouton de menu : « Plus » dans la barre du bas (le ☰ de l'en-tête faisait la même chose). */
body:has(>.barre-onglets) .topbar .nav-bouton{display:none}
/* La langue se change dans le menu du compte ; l'en-tête garde : titre, recherche, notifications, compte. */
.topbar .lang-pick{display:none}
.dd-langues{display:flex;gap:4px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line-2)}
.dd-langues a{flex:1;text-align:center;padding:8px 4px!important;border:1px solid var(--line);border-radius:99px!important;font-size:.82rem!important}
.dd-langues a.on{background:var(--brand-soft);color:var(--brand-ink);border-color:transparent;font-weight:600}
.dd-menu a,.dd-menu .dd-item{min-height:40px;display:flex;align-items:center}
/* « J'ai un problème » : dans le menu du compte ; le bouton flottant recouvrait le bord des cartes. */
body:has(>.barre-onglets) .probleme-bouton{display:none}
/* Actions rapides en tête du menu « Plus ». */
.nav-rapides{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 4px 14px;margin-bottom:10px;border-bottom:1px solid var(--line-2)}
.nav-rapides-titre{grid-column:1/-1;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:0 4px}
.nav .nav-rapides a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:12px;background:var(--brand-tint);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.86rem;line-height:1.25;min-height:76px;white-space:normal}
.nav .nav-rapides a svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
}
/* Dans l'application mobile, la recherche est là (elle y était masquée : seule façon de retrouver un locataire par son nom). */
.in-app .topbar [data-palette-ouvrir]{display:inline-flex}
/* 3.14.4 : tablette (801 à 1100 px) : chaque icône de la barre latérale a son nom court dessous, les mêmes mots que la
barre du bas du téléphone (« Parc », « Loyers », « Actes »…). Au doigt, il n'y a pas de survol : sans nom, les neuf
icônes ne se reconnaissaient pas. */
.sidebar .nav a>span.court{display:none}
@media (min-width:801px) and (max-width:1100px){
:root{--sidebar-w:84px}
body:not(.admin) .sidebar .nav a,.sidebar .nav a{flex-direction:column;padding:8px 2px;gap:3px}
.sidebar .nav a>span.court{display:block;font-size:.66rem;font-weight:600;line-height:1.15;text-align:center;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .nav a[title]:hover::after{display:none}
.crumbs-racine{display:none}
}
/* Indicateurs sur tablette portrait (deux par ligne) : le dernier, seul, prend la ligne au lieu de laisser un trou. */
@media (min-width:601px) and (max-width:900px){.grid:has(>.card.kpi)>.card.kpi:last-child:nth-child(odd){grid-column:1/-1}}
/* Une seule entrée de recherche à l'écran : le champ sur bureau et tablette (Ctrl+K et « / » y mènent aussi), la loupe
sur téléphone. Le champ trouve aussi les pages et fonctions (3.14.4). */
@media (min-width:801px){.topbar [data-palette-ouvrir]{display:none!important}}
/* Actions rapides : le « + » de l'en-tête sur bureau et tablette ; sur téléphone, elles sont en tête du menu « Plus ». */
.dd-titre{display:block;padding:6px 12px 4px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:800px){.topbar .dd-rapides{display:none}}
/* 3.14.5 : fichiers. Ordinateur : la zone de dépôt s'éclaire quand on y glisse des fichiers. Téléphone : la feuille
« Prendre une photo / Choisir dans la galerie ». */
.depot-actif{outline:2px dashed var(--brand);outline-offset:4px;border-radius:12px;background:var(--brand-tint)}
.depot-indice{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-3)}
@media (pointer:coarse){.depot-indice{display:none}}
.feuille-fichiers{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.feuille-corps{width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px;animation:up 160ms var(--ease)}
.feuille-corps button{min-height:52px;border:0;border-radius:14px;background:#fff;color:var(--brand);font:inherit;font-size:1rem;font-weight:600;cursor:pointer}
.feuille-corps button.annuler{color:var(--ink-2);margin-top:4px}
.continuer-qr{display:grid;place-items:center;min-height:220px}.continuer-qr svg{width:220px;height:220px}
.continuer-adresse{word-break:break-all;text-align:center}
/* Sur téléphone, on est déjà sur le téléphone : pas de « Continuer sur le téléphone ». */
@media (pointer:coarse) and (max-width:800px){.continuer-bouton,[data-test="rapide-continuer"]{display:none!important}}
.in-app .continuer-bouton{display:none!important}
/* 3.14.6 : champ proposé par la lecture de la facture, à vérifier. */
.ia-propose{background:var(--brand-tint)!important;border-color:var(--brand)!important}
.bandeau-ajouts{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:10px 12px 10px 16px;border-radius:14px;box-shadow:var(--sh-3);font-size:.9rem;max-width:calc(100% - 24px)}
/* 3.14.6 : fichiers partagés depuis le téléphone. */
.partage-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.partage-vignette{display:flex;flex-direction:column;gap:4px;text-decoration:none!important;color:var(--ink-2)}
.partage-vignette img,.partage-icone{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center}
.partage-icone svg{width:28px;height:28px;stroke:var(--ink-3);fill:none;stroke-width:1.8}
.partage-vignette small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.partage-choix{grid-template-columns:1fr!important}}
/* 3.14.6 : pages photographiées (aperçu, recadrage). */
.pages-apercu{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.page-vignette{margin:0;display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--ink-3)}
.page-vignette img,.page-pdf{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-weight:700}
.page-vignette div{display:flex;flex-wrap:wrap;gap:2px}
.page-vignette .btn{padding:4px 8px;min-height:32px}
.recadrage{position:fixed;inset:0;z-index:130;background:#0B1220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 12px calc(16px + env(safe-area-inset-bottom))}
.recadrage-aide{color:#fff;margin:0;font-size:.9rem;text-align:center}
.recadrage-scene{position:relative;max-width:100%;max-height:calc(100vh - 160px);touch-action:none}
.recadrage-scene img{display:block;max-width:100%;max-height:calc(100vh - 160px);user-select:none;-webkit-user-drag:none}
.recadrage-cadre{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(11,18,32,.55);cursor:move;touch-action:none}
.recadrage-cadre i{position:absolute;width:28px;height:28px;border:4px solid var(--brand);background:#fff;border-radius:50%}
.recadrage-cadre i[data-c="nw"]{left:-14px;top:-14px;cursor:nwse-resize}.recadrage-cadre i[data-c="ne"]{right:-14px;top:-14px;cursor:nesw-resize}
.recadrage-cadre i[data-c="sw"]{left:-14px;bottom:-14px;cursor:nesw-resize}.recadrage-cadre i[data-c="se"]{right:-14px;bottom:-14px;cursor:nwse-resize}
.recadrage-actions{display:flex;gap:10px}.recadrage-actions .btn-ghost{color:#fff}
.achat .prix-ouverture{color:var(--brand-ink)}
/* 3.14.10 : audit du back-office (menu en groupes, pastilles, recherche, environnement, file « À traiter », listes) */
.bo-nav{gap:2px}
.bo-groupe{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.bo-groupe-titre{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--side-section);padding:6px 10px 2px}
.bo-nav a{position:relative}
.bo-nav a span{flex:1;min-width:0}
.bo-pastille{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:.72rem;line-height:20px;text-align:center;background:var(--side-plan-line);color:#fff;font-weight:700}
.bo-pastille.danger{background:var(--danger)}
.bo-pastille.warn{background:var(--warn)}
.bo-env{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--danger-soft);color:var(--danger);border:1px solid currentColor}
.bo-env-dev,.bo-env-dev-demo{background:var(--warn-soft);color:var(--warn)}
.bo-env-app-demo{background:var(--info-soft);color:var(--info)}
.bo-recherche{margin-left:auto;position:relative;display:flex;align-items:center;width:min(340px,40vw)}
.bo-recherche svg{position:absolute;left:10px;width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:1.8;pointer-events:none}
.bo-recherche .input{padding-left:32px;height:36px}
.bo-qui{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-2);white-space:nowrap;max-width:180px}
.bo-qui span{overflow:hidden;text-overflow:ellipsis}
.bo-qui svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.bo-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink)}
.bo-ligne:hover{background:var(--surface-2);text-decoration:none}
.bo-file{display:flex;flex-direction:column;gap:6px}
.bo-file a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.bo-file a:hover{text-decoration:none;border-color:var(--brand)}
.bo-file a i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--info)}
.bo-file a.danger i{background:var(--danger)}
.bo-file a.warn i{background:var(--warn)}
.bo-file a span{flex:1}
.bo-file a b{font-variant-numeric:tabular-nums}
.bo-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.bo-filtres .input,.bo-filtres .select{width:auto;min-width:0}
.bo-puces{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bo-puces a{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;color:var(--ink-2);background:var(--surface)}
.bo-puces a.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2);font-weight:600}
.bo-puces a:hover{text-decoration:none;border-color:var(--brand)}
.bo-pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 16px}
.bo-barres{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}
.bo-barres span{flex:1;min-width:3px;background:var(--brand-soft);border-top:2px solid var(--brand);border-radius:3px 3px 0 0;position:relative}
.bo-barres span.zero{border-top-color:var(--line);background:transparent}
.bo-legende{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-3);margin-top:4px}
.bo-resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.bo-resume div{display:flex;flex-direction:column;gap:2px}
.bo-resume small{color:var(--ink-3)}
.bo-note{border-left:3px solid var(--warn);background:var(--warn-soft);padding:8px 12px;border-radius:var(--r-sm)}
.bo-actions-compte{display:flex;flex-wrap:wrap;gap:6px}
.u-white-space-nowrap{white-space:nowrap}
@media (max-width:900px){.bo-recherche{width:auto;flex:1;min-width:0}.bo-qui span{display:none}body.admin .topbar .crumbs{display:none}}
@media (max-width:480px){.bo-env{display:none}}
.bo-file a svg{width:16px;height:16px;flex:none;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bo-barres span{align-self:flex-end}
.bo-barres span[data-h="0"]{height:2%}.bo-barres span[data-h="1"]{height:10%}.bo-barres span[data-h="2"]{height:20%}.bo-barres span[data-h="3"]{height:30%}.bo-barres span[data-h="4"]{height:40%}.bo-barres span[data-h="5"]{height:50%}.bo-barres span[data-h="6"]{height:60%}.bo-barres span[data-h="7"]{height:70%}.bo-barres span[data-h="8"]{height:80%}.bo-barres span[data-h="9"]{height:90%}.bo-barres span[data-h="10"]{height:100%}
.bo-filtres form{flex-wrap:wrap}@media (max-width:600px){.bo-filtres .input[type=date]{flex:1 1 140px}}
/* ==== 3.14.26 : lot Ergonomie (audit A7, lot 9) ============================================================== */
/* A7-01 : sur téléphone et tablette, la barre du haut est opaque, avec un trait : les icônes ne flottent plus sur le
texte qui défile ; elle porte le nom de la page (la règle du back-office qui le masquait touchait aussi l'application). */
@media (max-width:1024px){.topbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.06)}}
/* A7-05, D48 : l'Aperçu d'un bien (trois cartes cliquables) et la complétude en une ligne repliable. */
.apercu-bien .apercu-carte{color:inherit;text-decoration:none;min-height:100%}
.apercu-bien a.apercu-carte:hover{border-color:var(--brand);box-shadow:var(--sh-2)}
.apercu-bien .card-b{gap:6px}
.apercu-titre{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.apercu-titre svg{width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:1.9}
.apercu-bien .apercu-carte b{font-size:1.02rem}
.completude-ligne{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 14px}
.completude-ligne>summary,.progression-dossier>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--brand-ink);font-weight:600}
.completude-ligne>summary::-webkit-details-marker,.progression-dossier>summary::-webkit-details-marker{display:none}
.completude-ligne>summary::after,.progression-dossier>summary::after{content:"›";margin-left:auto;font-size:1.3rem;line-height:1;color:var(--ink-3);transition:transform 150ms}
.completude-ligne[open]>summary::after,.progression-dossier[open]>summary::after{transform:rotate(90deg)}
.completude-ligne>summary svg,.progression-dossier>summary svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2}
.progression-dossier>summary .muted{font-weight:500}
.completude-points{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.completude-points li{display:flex;flex-direction:column;gap:2px}
.completude-points a{font-weight:600}
/* D53 : chiffres alignés (tabular-nums) dans les colonnes et indicateurs de montants. */
.montant,.num,.kpi .value,.table td,.agenda-date b,.loyers-ligne .montant{font-variant-numeric:tabular-nums}
/* A7-08 : la carte des arriérés en tête de « Loyers ». */
.arrieres-carte{display:block;color:inherit;text-decoration:none;border-color:var(--danger-line-2)}
.arrieres-carte .card-b{padding:14px 18px}
.arrieres-carte:hover{border-color:var(--danger)}
.arrieres-carte .chevron{font-size:1.6rem;color:var(--ink-3);line-height:1}
/* A7-11 : le menu d'une ligne de loyer s'appelle « Actions » sur bureau ; sur téléphone, l'icône « ••• » suffit. */
.dd-actions{display:inline-flex;align-items:center;gap:6px}
.dd-actions svg{display:none}
@media (max-width:800px){.dd-actions .dd-actions-texte{display:none}.dd-actions svg{display:inline-block}}
/* A7-09 : carnet d'adresses en liste compacte ; filtre par rôle dans une liste déroulante. */
.contacts-filtre .select{max-width:320px}
.contacts-liste{list-style:none;margin:0;padding:0}
.contact-ligne{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.contact-ligne:last-child{border-bottom:0}
.contact-ouvrir{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:6px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.contact-ouvrir b{font-size:1rem}
.contact-ouvrir small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-actions{display:flex;gap:8px;flex:none}
.contact-actions .icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--brand-tint)}
.contact-actions .icon-btn svg{stroke:var(--brand)}
/* A7-10 : filtres du registre repliables (repliés sur téléphone tant qu'aucun filtre n'est actif). */
.registre-filtres-repli>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:8px}
.registre-filtres-repli>summary::-webkit-details-marker{display:none}
.registre-filtres-repli>summary svg{width:16px;height:16px}
@media (min-width:801px){.registre-filtres-repli>summary{display:none}}
.formules-repli>summary{list-style:none;cursor:pointer}
.formules-repli>summary::-webkit-details-marker{display:none}
.formules-repli>summary .card-title::after{content:"›";margin-left:8px;font-size:1.3rem;color:var(--ink-3);transition:transform 150ms}
.formules-repli[open]>summary .card-title::after{transform:rotate(90deg)}
/* A7-10 : sections repliables sur téléphone (Analyse) : le titre seul, avec un chevron. */
@media (max-width:800px){
.card[data-repliable]>.card-h{cursor:pointer}
.card[data-repliable]>.card-h::after{content:"›";margin-left:auto;font-size:1.4rem;color:var(--ink-3);transform:rotate(90deg);transition:transform 150ms}
.card[data-repliable].replie>.card-h::after{transform:none}
.card[data-repliable].replie>:not(.card-h){display:none}
}
/* ==== D49 (A7-13) : l'indigo pour le décoratif et la progression ; le vert reste aux statuts (« Payé », « Valide »).
Barres, jauges, anneaux, pastilles de carte, coches, numéros d'étape faits, icônes de liste : indigo. */
.progress.ok i,.ring,.sparkline i,.segments span.plein,.demarrage-barre>span,.palier-solide .pb-barre i,.palier-complet .pb-barre i{background:var(--brand)}
.ring{background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0)}
.dm-anneau .dm-plein,.palier-solide .pd-plein,.palier-complet .pd-plein{stroke:var(--brand)}
.steps .st.done .n,.steps .st.done::after,.etape-num.fait,.demarrage-etape.fait .demarrage-num,.demarrage-plus-liste li.fait .demarrage-coche,.pb-liste li.fait .pb-coche,.edl-etape-bouton.fait .edl-etape-n,.demarrage-bravo-ic,.toggle.on{background:var(--brand);border-color:var(--brand)}
.pas-etapes li.fait .pas-n,.banque-etape-n.fait,.sinistre-num.fait{background:var(--brand-soft);color:var(--brand-ink)}
.card-title .ic.proof{background:var(--brand-soft);color:var(--brand)}
.trust svg,.price li svg,.row>svg,li>svg,.demo-atouts svg,.formules-grille td.oui svg{stroke:var(--brand)}
.demarrage-bravo{background:var(--brand-tint)}
.st-loue{background:var(--brand)}.st-louable{background:var(--warn)}.st-travaux{background:var(--ink-3)}.st-occupe{background:var(--gris-1)}
.public-tete{background:var(--grad-brand)}
.pb-a-faire li{border:1px solid var(--line);background:var(--surface)}
/* A7-14 : sous 480 px, l'adresse puis le bouton (l'adresse était écrasée sur quatre lignes) ; chevron lisible. */
@media (max-width:480px){.location-louable{flex-direction:column;align-items:flex-start;gap:8px}}
.location-explication > summary::after{content:"›";font-size:1.4rem;line-height:1;transform:rotate(90deg)}
.location-explication[open] > summary::after{transform:rotate(-90deg)}
/* D47 : chiffres résumés sur une ligne (au lieu de cartes empilées). */
.resume-ligne{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:.95rem;color:var(--ink-2)}
.resume-ligne a{color:inherit;text-decoration:none;padding:4px 0}
.resume-ligne a b{font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--ink)}
.resume-ligne a.txt-danger b{color:var(--danger)}.resume-ligne a.txt-warn b{color:var(--warn-ink-2)}
.resume-ligne a.actif{text-decoration:underline;text-underline-offset:4px;color:var(--brand-ink)}
.resume-ligne>span{color:var(--ink-4)}
/* A7-18 : le menu « Plus » (téléphone) ne répète pas la barre du bas ; le logo n'est plus coupé en haut. */
@media (max-width:800px){
body:has(>.barre-onglets) .sidebar .nav a.nav-en-bas{display:none}
.app.nav-open .sidebar{padding-top:calc(20px + env(safe-area-inset-top))}
}
/* A7-19 : les mots longs (néerlandais : « huurovereenkomst ») se coupent avec un trait d'union, selon la langue de la
page, au lieu d'être tronqués ; les en-têtes de formule se réduisent au lieu de déborder. */
.formules-grille td:first-child,.formules-grille th,.niveau-carte,.formule-carte,.lot-carte{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
@media (max-width:480px){.formules-grille thead th:not(:first-child){width:68px;font-size:.72rem;overflow-wrap:anywhere;hyphens:auto}}
/* D50 (A7-20) : la tablette portrait (640 à 800 px) garde une grille : 2 colonnes, 3 pour les rangées de trois dès 720 px
(elle recevait la mise en page du téléphone, une carte par ligne). */
@media (min-width:640px) and (max-width:800px){
.grid.g-2,.grid.g-4,.grid.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g-3>.card.kpi:last-child:nth-child(odd),.grid.g-3>.apercu-carte:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:720px) and (max-width:800px){
.grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g-3>.card.kpi:last-child:nth-child(odd),.grid.g-3>.apercu-carte:last-child:nth-child(odd){grid-column:auto}
}
/* A7-22 : « Démo : » reste sur téléphone (la phrase commençait par une minuscule). */
.bandeau-demo .demo-court{display:none}
@media (max-width:800px){.bandeau-demo>span b.demo-long{display:none}.bandeau-demo>span b.demo-court{display:inline}}
/* A7-23 : bouton de fichier (le champ natif est masqué visuellement) ; « collez avec Ctrl+V » sur ordinateur seulement. */
.fichier-bouton{cursor:pointer}
.fichier-noms{display:inline-block;margin-left:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
@media (max-width:800px){.depot-indice{display:none}}
/* A7-24 : sur téléphone, les messages s'affichent en haut (ils recouvraient l'affiche QR et la barre du bas). */
@media (max-width:800px){.toasts{top:calc(12px + env(safe-area-inset-top));bottom:auto}}
.u-color-ink-4{color:var(--ink-4)}
/* A7-27 : le bouton flottant d'aide est une pilule libellée (« Un problème ? »), toujours lisible. */
.probleme-bouton.probleme-pilule{padding:8px 14px;opacity:1;gap:8px;font-size:.84rem}
.probleme-bouton.probleme-pilule span{display:inline}
.probleme-bouton.probleme-pilule svg{width:16px;height:16px}
/* A7-27 : sur l'accueil, les boutons d'une tâche sont toujours sous son texte, alignés à gauche (ils changeaient de place
selon la longueur du titre). */
.task.tache-accueil{flex-wrap:wrap;align-items:flex-start}
.task.tache-accueil .body{flex:1 1 calc(100% - 64px)}
.task.tache-accueil>.row{flex:1 1 100%;justify-content:flex-start!important;gap:8px;padding-left:54px}
@media (max-width:800px){.task.tache-accueil>.row{padding-left:48px}}
/* A7-23 : le champ fichier natif, remplacé par son bouton, reste dans le formulaire mais n'occupe ni place ni cible. */
input[type=file].fichier-masque{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
/* ==== 3.14.27 : lot 10, navigation à six rubriques (D46) ===================================================== */
/* Menu latéral : chaque rubrique et, sous la rubrique ouverte, ses pages (deux niveaux au plus). */
.nav-groupe{position:relative}
.nav-groupe>a{padding-right:40px!important}
.nav-deplier{position:absolute;right:4px;top:4px;width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--ink-3);border-radius:8px;cursor:pointer;font-size:1.25rem;line-height:1}
.nav-deplier span{display:inline-block;transition:transform 150ms}
.nav-deplier:hover{background:var(--surface-2);color:var(--ink)}
.nav-groupe.ouvert>.nav-deplier span{transform:rotate(90deg)}
.nav-sous{list-style:none;margin:2px 0 6px;padding:0;display:none}
.nav-groupe.ouvert>.nav-sous{display:block}
body:not(.admin) .sidebar .nav .nav-sous a{min-height:34px;padding:6px 10px 6px 44px;font-size:.88rem;font-weight:500;color:var(--ink-2);border-radius:8px}
body:not(.admin) .sidebar .nav .nav-sous a.on{color:var(--brand-ink);font-weight:600;background:var(--brand-tint)}
body:not(.admin) .sidebar .nav .nav-sous a:hover{background:var(--surface-2)}
.nav-profil{display:none}
.rubrique-lien{display:none;align-items:center;gap:8px;margin:-4px 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font-weight:600;font-size:.9rem;text-decoration:none;min-height:44px}
/* Tablette (menu en icônes) : pas de sous-menu ; les pages de la rubrique sont dans la rangée d'onglets. */
@media (min-width:801px) and (max-width:1100px){.nav-deplier,.nav-groupe>.nav-sous{display:none!important}.nav-groupe>a{padding-right:2px!important}}
/* Bureau : le sous-menu remplace la rangée d'onglets des rubriques (deux niveaux au plus). */
@media (min-width:1101px){.onglets-section.onglets-rubrique{display:none}}
/* Téléphone : le menu « Plus » montre Documents, Compte, Aide et les actions rapides ; les rubriques de la barre du
bas n'y sont pas répétées ; la rangée d'onglets laisse place au lien vers la page-sommaire de la rubrique. */
@media (max-width:800px){
body:has(>.barre-onglets) .sidebar .nav .nav-groupe.nav-en-bas{display:none}
.sidebar .nav .nav-deplier,.sidebar .nav .nav-sous{display:none!important}
.nav-profil{display:block;border-top:1px solid var(--line-2);margin-top:6px;padding-top:6px}
.onglets-section.onglets-rubrique{display:none}
.rubrique-lien{display:flex}
}
.rubrique-lien svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.9}
.rubrique-lien .chevron{margin-left:auto;color:var(--ink-3);font-size:1.3rem;line-height:1}
/* La page-sommaire d'une rubrique (téléphone). */
.sommaire-liste{list-style:none;margin:0;padding:0}
.sommaire-liste li+li{border-top:1px solid var(--line-2)}
.sommaire-liste a{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:52px;color:var(--ink);text-decoration:none;font-weight:600}
.sommaire-liste a svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:1.8;flex:none}
.sommaire-liste a .chevron{margin-left:auto;color:var(--ink-3);font-size:1.3rem}
.sommaire-liste a.on{background:var(--brand-tint);color:var(--brand-ink)}
/* Fil d'Ariane : « Rubrique › Page » ; sur une fiche, un retour vers la rubrique. */
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .fil-retour{display:inline-flex;align-items:center;margin-right:6px;font-size:1.1rem;color:var(--brand-ink)}
/* Barre du bas : six cases (cinq rubriques et « Plus ») ; les noms longs (« Loyers et argent ») tiennent sur deux lignes. */
@media (max-width:800px){
.barre-onglets a{min-width:0;padding:6px 2px;font-size:.64rem;line-height:1.15}
.barre-onglets a span{display:block;max-width:100%;text-align:center;overflow-wrap:anywhere;hyphens:auto}
}
/* Aperçu d'un bien : les gestes « Déposer un document » et « Inviter le locataire » sous la carte du bail. */
.apercu-gestes{display:flex;flex-wrap:wrap;gap:8px}
.apercu-gestes form{margin:0}
.apercu-gestes svg{width:16px;height:16px}
/* D47 : les chiffres d'une page tiennent sur une ligne, sans cartes (les cartes sont réservées aux objets cliquables) ;
24 px entre les sections ; titres de section à 18 px, gras. */
.chiffres-ligne{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 36px;margin:0 0 24px;padding:2px 0}
.kpi.chiffre{padding:0;background:none;border:0;box-shadow:none;min-width:0;flex:0 1 auto}
.kpi.chiffre .label{font-size:.74rem;letter-spacing:.05em}
.kpi.chiffre .value{font-size:1.45rem;margin-top:2px}
.kpi.chiffre .delta{margin-top:4px;font-size:.78rem;padding:2px 8px}
.kpi.chiffre small{display:block;margin-top:2px;font-size:.8rem}
.kpi.chiffre .progress,.kpi.chiffre .segments{max-width:220px}
.main .mb-2{margin-bottom:24px}
.card-title h2,.main h2.titre-section{font-size:18px;font-weight:700}
@media (max-width:800px){
.chiffres-ligne{gap:8px 22px;margin-bottom:18px}
.kpi.chiffre .value{font-size:1.15rem}
.kpi.chiffre .label{font-size:.68rem}
.kpi.chiffre .progress,.kpi.chiffre .segments,.kpi.chiffre small{display:none}
.kpi.chiffre .delta{font-size:.7rem;padding:1px 6px;margin-top:2px}
}
.card-h .lien-discret{font-size:.88rem;font-weight:600;color:var(--brand-ink);text-decoration:none;white-space:nowrap;padding:8px 0}
.card-f.note-i{display:flex;align-items:center;gap:8px;justify-content:flex-start}
/* 3.14.28 (H1) : menu d'actions ouvert, déplacé dans pour passer au-dessus des cartes. */
.dd-menu.dd-flottant{display:block;animation:up 160ms var(--ease)}
.pas-etapes li.fait{cursor:pointer}
.pas-etapes li.fait:hover .pas-l{text-decoration:underline}
.dd-menu .dd-item.actif{font-weight:600;color:var(--ink)}
.dd-menu .dd-item.actif svg{width:14px;height:14px;vertical-align:-2px}
.droit-actions{justify-content:center}
[data-interdit]{display:none!important}
.lien-coupe{overflow-wrap:anywhere;word-break:break-all;white-space:normal}
/* 3.14.28 (tests du 03/11, M15) : les mentions légales de l'annonce, lisibles sur le bandeau (texte clair). */
.public-tete .annonce-mentions,.public-tete .annonce-mentions small{color:#fff}
.public-tete .annonce-mentions{margin:10px 0 0;padding-left:18px}
.public-tete .annonce-mentions li{margin:2px 0}
/* 3.14.28 (tests du 03/11, m10) : le chiffre des notifications est une pastille, comme dans le menu. */
.topbar .icon-btn{position:relative}
.topbar .icon-btn .count{background:var(--danger);color:#fff;font-size:.62rem;font-weight:700;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:99px;text-align:center}
/* 3.14.28 (tests du 03/11, m11) : sur téléphone, les boutons d'une étape restent au-dessus de la barre du bas. */
@media (max-width:800px){body:has(>.barre-onglets) .questionnaire .pas-actions{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));background:#fff;z-index:5;border-top:1px solid var(--line-2)}}
/* 3.14.28 (tests du 03/11, m19) : le bouton d'aide flottant ne recouvre plus les derniers boutons de la page. */
@media (min-width:801px){body:has(.probleme-bouton) .content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
body.locataire:has(.probleme-bouton) .content, .espace-locataire .content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* 3.14.28 (m27) : la zone de signature a la même taille pour le bailleur (page large) et le locataire. */
.pad-signature{max-width:520px}
.niveau-retire{opacity:.7}
/* 3.14.30 (retest du 04/11, P5) : téléphone, /demandes : « Réponses rapides » et l'envoi restent dans la carte. */
@media (max-width:640px){.composer-form > .row.between{flex-direction:column;align-items:stretch;min-width:0}.composer-form > .row.between > .row{flex-wrap:wrap;min-width:0;max-width:100%}.composer-form input[type=file]{max-width:100%;flex:1 1 160px;min-width:0}.composer-form .chip{white-space:normal;max-width:100%}.composer-form > .row.between > .row:last-child{justify-content:flex-end}}
/* =====================================================================================================================
3.14.31 · CHARTE E « BLEU NUIT ET BLANC » (maquette « version ultime », registre UX-D1 à UX-D32, 10/11/2026)
Ce bloc vient en dernier : il habille la coque du bailleur (body.bailleur) et pose les composants communs.
Les espaces locataire, artisan, partenaire, admin et auth ne reçoivent que les jetons (tokens.css) et le logo.
===================================================================================================================== */
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
.chiffres{font-variant-numeric:tabular-nums}
/* ---- Logo provisoire (UX-D32) : deux tracés, couleurs selon le fond (logo.md § 2) ----------------------------------- */
.logo svg .logo-maison{stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo svg .logo-coche{stroke:var(--nuit-clair);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Fonds clairs (auth, public, locataire, artisan, affiche QR) : tuile bleu nuit, symbole négatif (une seule règle partout). */
.brand .logo,.tenant .brand .logo,.public-tete .brand .logo{background:var(--nuit);box-shadow:none;border-radius:10px}
.brand .logo svg{width:24px;height:24px}
/* Menu latéral bleu nuit : pas de tuile, symbole négatif à 34 px. */
body.bailleur .sidebar .brand .logo{background:transparent;width:34px;height:34px;border-radius:0}
body.bailleur .sidebar .brand .logo svg{width:34px;height:34px}
.admin .sidebar .brand .logo{background:transparent}
/* ---- Coque du bailleur : menu latéral (composants § 1, UX-D19) ------------------------------------------------------- */
body.bailleur .sidebar{background:var(--side-bg);border-right:0;padding:20px 12px;gap:2px}
body.bailleur .sidebar .brand{color:#fff;font-size:18px;font-weight:700;letter-spacing:-.01em;padding:2px 8px 18px;gap:10px}
body.bailleur .sidebar .nav{gap:4px}
body.bailleur .sidebar .nav a{color:#E9EEF6;font-size:15px;font-weight:500;min-height:44px;padding:10px 12px;border-radius:10px;gap:12px}
body.bailleur .sidebar .nav a svg{width:20px;height:20px;stroke-width:1.7;color:#C9D6EA}
body.bailleur .sidebar .nav a:hover{background:rgba(255,255,255,.08);color:#fff}
body.bailleur .sidebar .nav a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--accent)}
body.bailleur .sidebar .nav a.active svg{color:#fff}
body.bailleur .sidebar .nav-deplier{color:#AFC0D6;top:4px}
body.bailleur .sidebar .nav-deplier:hover{background:rgba(255,255,255,.08);color:#fff}
body.bailleur .sidebar .nav .nav-sous{margin:4px 0 8px}
body.bailleur .sidebar .nav .nav-sous a{position:relative;min-height:38px;padding:8px 10px 8px 44px;font-size:14px;font-weight:500;color:#AFC0D6;border-radius:10px}
body.bailleur .sidebar .nav .nav-sous a:hover{background:rgba(255,255,255,.06);color:#fff}
body.bailleur .sidebar .nav .nav-sous a.on{color:#fff;font-weight:650;background:rgba(255,255,255,.10)}
body.bailleur .sidebar .nav .nav-sous a.on::before{content:"";position:absolute;left:28px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
body.bailleur .sidebar .nav .count.neutral{background:rgba(255,255,255,.16);color:#fff}
body.bailleur .sidebar .nav-bascule{color:#AFC0D6}
body.bailleur .sidebar .nav-profil{border-top-color:rgba(255,255,255,.12)}
body.bailleur .sidebar .side-aide{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;margin:10px 0 4px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:14px;font-weight:600;text-decoration:none}
body.bailleur .sidebar .side-aide:hover{background:rgba(255,255,255,.16)}
body.bailleur .sidebar .side-aide svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.bailleur .sidebar .side-compte{color:#fff;text-decoration:none;border-radius:10px;padding:8px}
body.bailleur .sidebar a.side-compte:hover{background:rgba(255,255,255,.08)}
body.bailleur .sidebar .side-compte b{color:#fff} body.bailleur .sidebar .side-compte small{color:#AFC0D6}
body.bailleur .sidebar .avatar{background:var(--accent);color:var(--nuit);box-shadow:none}
/* Cartes logées dans le menu (passage d'un appareil, démarrage) : lisibles sur le fond nuit. */
body.bailleur .sidebar .carte-passage,body.bailleur .sidebar .demarrage-mini{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#E9EEF6}
body.bailleur .sidebar .carte-passage *,body.bailleur .sidebar .demarrage-mini *{color:inherit}
body.bailleur .sidebar .carte-passage a,body.bailleur .sidebar .demarrage-mini a{color:#fff}
@media (min-width:801px) and (max-width:1100px){body.bailleur .sidebar .side-aide span{display:none}body.bailleur .sidebar .side-aide{justify-content:center}}
/* ---- En-tête (composants § 1, UX-D30) ------------------------------------------------------------------------------ */
body.bailleur .topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--line);padding:0 24px;gap:10px;box-shadow:none}
body.bailleur .topbar .icon-btn{width:44px;height:44px;border-color:var(--line)}
body.bailleur .topbar .icon-btn:hover{transform:none;box-shadow:none;background:var(--surface-2)}
body.bailleur .topbar .crumbs{font-size:14px;color:var(--ink-2)}
body.bailleur .topbar .crumbs .crumbs-racine a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}
body.bailleur .topbar .crumbs b{color:var(--ink);font-weight:650}
/* Recherche compacte « Chercher · Ctrl K » : le champ de recherche instantanée existant, qui s'élargit quand on y entre. */
body.bailleur .topbar .recherche-globale{flex:0 0 auto;min-width:0;margin-left:auto}
body.bailleur .topbar .recherche-globale>svg{position:absolute;left:13px;top:50%;width:18px;height:18px;margin-top:-9px;stroke:var(--ink-3);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body.bailleur .topbar .recherche-globale .input{width:200px;height:44px;padding:0 66px 0 38px;border-radius:10px;border-color:var(--line);font-size:15px}
body.bailleur .topbar .recherche-globale .input::placeholder{color:var(--ink-3)}
body.bailleur .topbar .recherche-globale .input:focus{width:340px;padding-right:12px}
body.bailleur .topbar .recherche-globale .ri-touche{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px/1 var(--font);color:var(--ink-2);background:#fff;border:1px solid var(--line-3);border-radius:6px;padding:4px 6px;pointer-events:none}
body.bailleur .topbar .recherche-globale:focus-within .ri-touche{display:none}
/* Pastille d'état globale (UX-D30) : ambre « n à faire », verte « Tout est en ordre ». Toujours un mot à côté de la couleur. */
.pastille-etat{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid;font-size:13px;font-weight:650;white-space:nowrap;text-decoration:none!important;flex:none}
.pastille-etat.a-faire{background:var(--st-ambre-bg);border-color:var(--bd-afaire-line);color:var(--st-ambre-ink)}
.pastille-etat.a-faire i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pastille-etat.en-ordre{background:var(--st-vert-bg);border-color:var(--bd-ordre-line);color:var(--st-vert-ink)}
.pastille-etat svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pastille-etat:hover{filter:brightness(.98)}
@media (max-width:800px){.pastille-etat{display:none}}
@media (max-width:1100px){body.bailleur .topbar .recherche-globale .input{width:120px}body.bailleur .topbar .recherche-globale .ri-touche{display:none}}
/* ---- Barre du bas mobile (UX-D31) : l'entrée active a son pictogramme dans une pastille teintée --------------------- */
@media (max-width:800px){
body.bailleur .barre-onglets{padding-top:8px;min-height:74px}
body.bailleur .barre-onglets a svg{width:24px;height:24px;stroke-width:1.7;padding:3px 10px;box-sizing:content-box;border-radius:var(--r-pill)}
body.bailleur .barre-onglets a.on{color:var(--brand)}
body.bailleur .barre-onglets a.on svg{background:var(--brand-soft)}
body.bailleur .barre-onglets .count{left:calc(50% + 10px);background:var(--accent);color:var(--nuit)}
}
/* ---- En-tête de page (UX-D3) ---------------------------------------------------------------------------------------- */
body.bailleur .content{padding:24px}
body.bailleur .page-head{margin-bottom:18px;align-items:center}
body.bailleur .page-head h1{font-size:24px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
body.bailleur .page-head .sub{font-size:14px;color:var(--ink-2);margin-top:2px}
/* ---- Cartes, tableaux, pastilles de statut (charte E § 2, composants § 6) ----------------------------------------- */
.card{border-color:var(--line);border-radius:16px;box-shadow:none}
.card.hover:hover{box-shadow:var(--sh-2);transform:none}
.card-f{border-radius:0 0 16px 16px}
.card-title .ic{background:var(--brand-soft);color:var(--brand)}
.badge{font-size:13px;font-weight:600;padding:3px 10px}
.badge.ok{background:var(--st-vert-bg);color:var(--st-vert-ink)}
.badge.warn{background:var(--st-ambre-bg);color:var(--st-ambre-ink)}
.badge.danger{background:var(--st-rouge-bg);color:var(--st-rouge-ink)}
.badge.info,.badge.brand{background:var(--st-bleu-bg);color:var(--st-bleu-ink)}
.badge.neutral{background:var(--st-gris-bg);color:var(--st-gris-ink)}
.table th{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);background:var(--surface-2)}
.table td{padding:9px 14px}
.table tbody tr:hover{background:var(--brand-tint)}
.task{border-radius:14px}
.task:hover{transform:none}
.kpi .value{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
.txt-danger,.kpi .value.txt-danger{color:var(--st-rouge-du)}
/* ---- Boutons (UX-D24, composants § 7) : un seul plein bleu par écran, le reste en contour -------------------------- */
.btn{border-radius:10px;font-weight:600;min-height:40px}
.btn:hover{transform:none;box-shadow:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--brand-2);box-shadow:none}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-bouton)}
.btn-secondary:hover{border-color:var(--brand-4);color:var(--brand)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:#fff;color:var(--st-rouge-ink);border-color:var(--danger-line-2)}
.btn-sm{min-height:36px;border-radius:10px;padding:7px 12px;font-size:14px}
.btn-lg{min-height:52px;border-radius:10px;font-size:16px;padding:12px 22px}
/* Ambre plein : réservé à « La chose à faire aujourd'hui » (UX-D7, UX-D24) ; texte toujours bleu nuit. */
.btn-accent{background:var(--accent);color:var(--nuit);border-color:var(--accent)}
.btn-accent:hover{background:#E99B26;color:var(--nuit)}
/* Bouton d'aide standard (UX-D26) : bleu pâle, 38 px, « ▶ libellé · durée », jamais plus visible que l'action. */
.btn-aide{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;border-radius:10px;background:var(--select-bg);border:1px solid var(--aide-line);color:var(--brand);font-size:14px;font-weight:650;text-decoration:none!important;cursor:pointer}
.btn-aide::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l6 4-6 4z' fill='%23fff'/%3E%3C/svg%3E") center/22px no-repeat;flex:none}
.btn-aide .duree{font-weight:500;font-size:13px;color:var(--aide-ink-2)}
/* ---- Sélection : trois composants (UX-D25, composants § 8) ---------------------------------------------------------- */
/* 1. Onglets soulignés : .tabs (existant). */
.tabs a{font-size:14px}
.tabs a.active,.tabs a.on{color:var(--brand);border-bottom-width:2px}
/* 2. Segment gris pour changer de vue : .seg et .segment (existants). */
.seg,.segment{background:var(--st-gris-bg);padding:3px;border-radius:10px}
.seg a.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,42,76,.12)}
/* 3. Pastilles en contour pour filtrer ou choisir : la sélection est bleu pâle, jamais pleine. */
.chip{border-color:var(--line-bouton);font-size:14px;min-height:32px}
.chip.on,.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--select-bg);color:var(--select-ink);border-color:var(--select-line)}
.radio-card.on,.radio-card:has(input:checked){border-color:var(--brand);border-width:2px;background:var(--brand-tint);box-shadow:none}
/* ---- Bandeau de synthèse à état (UX-D4, UX-D5, UX-D20, UX-D21, UX-D29 ; composants § 4) ------------------------------ */
.bandeau{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:center;padding:16px 22px;margin-bottom:16px;background:#fff;border:1px solid var(--line);border-radius:16px}
.bandeau.etat-ordre{background:var(--bd-ordre-bg);border-color:var(--bd-ordre-line);box-shadow:inset 6px 0 0 var(--bd-ordre-lisere)}
.bandeau.etat-afaire{background:var(--bd-afaire-bg);border-color:var(--bd-afaire-line);box-shadow:inset 6px 0 0 var(--bd-afaire-lisere)}
.bandeau.etat-ordre,.bandeau.etat-afaire{padding-left:28px}
.bandeau.seul{grid-template-columns:1fr}
.bandeau-etiquette{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bandeau-etat{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.bandeau-etat.ordre{background:var(--st-vert-bg);color:var(--st-vert-ink)}
.bandeau-etat.afaire{background:var(--st-ambre-bg);color:var(--st-ambre-ink)}
.bandeau-phrase{font-family:var(--serif);font-size:28px;line-height:1.15;font-weight:400;color:var(--ink-2);margin:8px 0 10px}
.bandeau-phrase b{color:var(--ink);font-weight:650}
.jauge{display:flex;gap:3px;height:12px;border-radius:6px;overflow:hidden;background:var(--line-2)}
.jauge i{display:block;height:100%;border-radius:3px;min-width:3px}
.jauge.pleine{gap:0}
.jauge.pleine i{background:var(--st-vert-plein);border-radius:6px}
.jauge i.vert{background:var(--st-vert-barre)} .jauge i.bleu{background:var(--st-bleu-barre)} .jauge i.ambre{background:var(--st-ambre-barre)} .jauge i.rouge{background:var(--st-rouge-barre)} .jauge i.gris{background:var(--st-gris-barre)}
.jauge-legende{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.jauge-legende b{color:var(--ink)}
.jauge-legende .cle{display:inline-flex;align-items:center;gap:6px}
.jauge-legende .cle::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--st-gris-barre))}
.bandeau-lignes{min-width:0}
.bandeau-lignes-titre{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.bandeau-lignes-titre b{font-size:14px;font-weight:650}
.bandeau-lignes-titre small{font-size:13px;color:var(--ink-2)}
.bl{display:grid;grid-template-columns:30px minmax(0,1fr) auto 15px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none!important}
.bl:first-of-type{border-top:0}
a.bl:hover .bl-titre{color:var(--brand)}
.bl-rond{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--st-gris-bg);color:var(--st-gris-ink);font-size:11px;font-weight:700}
.bl-rond svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl.rouge .bl-rond{background:var(--st-rouge-bg);color:var(--st-rouge-ink)} .bl.ambre .bl-rond{background:var(--st-ambre-bg);color:var(--st-ambre-ink)} .bl.bleu .bl-rond{background:var(--st-bleu-bg);color:var(--st-bleu-ink)} .bl.vert .bl-rond{background:var(--st-vert-bg);color:var(--st-vert-ink)}
.bl-titre{display:block;font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-sous{display:block;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-valeur{font-size:14px;font-weight:700;white-space:nowrap}
.bl.rouge .bl-valeur{color:var(--st-rouge-du)} .bl.ambre .bl-valeur{color:var(--st-ambre-ink)} .bl.bleu .bl-valeur{color:var(--st-bleu-ink)} .bl.vert .bl-valeur{color:var(--st-vert-ink)}
.bl-chevron{width:15px;height:15px;color:var(--ink-3)}
.bl-chevron svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){.bandeau{grid-template-columns:1fr;gap:14px}}
@media (max-width:600px){.bandeau-phrase{font-size:23px}}
/* ---- « La chose à faire aujourd'hui » (UX-D13, composants § 11) : le seul bloc foncé de la page ----------------- */
.chose-a-faire{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:16px;background:var(--nuit);color:#fff;border-radius:16px}
.chose-a-faire .caf-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:var(--accent);flex:none}
.chose-a-faire .caf-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chose-a-faire .caf-corps{flex:1;min-width:0}
.chose-a-faire .caf-etiquette{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.chose-a-faire .caf-titre{display:block;font-size:16px;font-weight:650;color:#fff;margin-top:2px}
.chose-a-faire .caf-sous{display:block;font-size:13.5px;color:var(--nuit-sous)}
.chose-a-faire .btn{flex:none}
/* ---- Carte d'objet suivi (UX-D16, composants § 5) --------------------------------------------------------------------- */
.carte-objet{background:#fff;border:1px solid var(--line);border-top:3px solid var(--st-gris-haut);border-radius:14px;padding:14px 16px}
.carte-objet.vert{border-top-color:var(--st-vert-barre)} .carte-objet.ambre{border-top-color:var(--accent)} .carte-objet.bleu{border-top-color:var(--brand)} .carte-objet.rouge{border-top-color:var(--st-rouge-haut)}
/* ---- Vignette du bien (UX-D27, composants § 12) : couleur d'identité et initiales, la photo passe avant ----------- */
.vignette-bien{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.02em;line-height:1;overflow:hidden;background:var(--bien-7);text-decoration:none!important}
.vignette-bien.petite{width:28px;height:28px;border-radius:8px;font-size:10px}
.vignette-bien.grande{width:44px;height:44px;border-radius:11px;font-size:16px}
.vignette-bien img{width:100%;height:100%;object-fit:cover;display:block}
.vignette-bien.c1{background:var(--bien-1)} .vignette-bien.c2{background:var(--bien-2)} .vignette-bien.c3{background:var(--bien-3)} .vignette-bien.c4{background:var(--bien-4)} .vignette-bien.c5{background:var(--bien-5)} .vignette-bien.c6{background:var(--bien-6)} .vignette-bien.c7{background:var(--bien-7)}
/* ---- Carte « Ce que Garentiz surveille » (UX-D28, composants § 13) ---------------------------------------------------- */
.surveille{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 22px}
.surveille-tete b{display:block;font-size:16px;font-weight:650}
.surveille-tete small{font-size:13px;color:var(--ink-2)}
.surveille-ligne{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.surveille-ligne:first-of-type{margin-top:8px}
.surveille-rond{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}
.surveille-ligne.vert .surveille-rond{background:var(--st-vert-bg);color:var(--st-vert-ink)} .surveille-ligne.ambre .surveille-rond{background:var(--st-ambre-bg);color:var(--st-ambre-ink)} .surveille-ligne.bleu .surveille-rond{background:var(--st-bleu-bg);color:var(--st-bleu-ink)}
.surveille-ligne b{display:block;font-size:14px;font-weight:650} .surveille-ligne small{display:block;font-size:12.5px;color:var(--ink-2)}
.surveille-statut{font-size:13px;font-weight:600}
.surveille-ligne.vert .surveille-statut{color:var(--st-vert-ink)} .surveille-ligne.ambre .surveille-statut{color:var(--st-ambre-ink)} .surveille-ligne.bleu .surveille-statut{color:var(--st-bleu-ink)}
/* ---- Étape suivante (UX-D18, composants § 10) : une ligne ambre pâle et un anneau qui pulse sur un seul bouton ------ */
.etape-suivante{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 14px;margin:-6px 0 16px;background:var(--accent-pale);border:1px solid var(--accent-soft);border-radius:10px;font-size:14px;color:var(--warn-ink-3)}
.etape-suivante b{color:var(--ink)}
.etape-suivante small{color:var(--st-ambre-ink)}
.anneau-etape{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)!important;animation:etape-pulse 1.8s var(--ease) 3 backwards}
@keyframes etape-pulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)}50%{box-shadow:0 0 0 3px #fff,0 0 0 10px rgba(242,169,59,.35)}}
/* ---- États calmes (SIG-06) : titres en serif ---------------------------------------------------------------------- */
.empty b,.empty h2,.vide h2{font-family:var(--serif);font-weight:600}
/* ---- Mouvement « poser, glisser, sceller » (SIG-10) : jamais de fill-mode « both » sur un bloc ou un dialogue -------- */
body.bailleur .content>*{animation:poser var(--t-poser) var(--ease) backwards}
body.bailleur .content>*:nth-child(2){animation-delay:50ms} body.bailleur .content>*:nth-child(3){animation-delay:100ms} body.bailleur .content>*:nth-child(4){animation-delay:150ms} body.bailleur .content>*:nth-child(5){animation-delay:200ms}
@keyframes poser{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.bailleur .content>*,.anneau-etape{animation:none!important}}
/* ---- Impression : ni menu, ni en-tête, ni pastille ----------------------------------------------------------------- */
@media print{.pastille-etat,.side-aide,.etape-suivante{display:none!important}.bandeau{break-inside:avoid}}
/* Le bouton flottant « Un problème ? » répétait l'entrée du menu du compte (regle-une-page § 4) : masqué sur bureau
chez le bailleur ; la même fenêtre s'ouvre depuis le menu du compte (menu-compte-probleme). */
@media (min-width:801px){body.bailleur .probleme-bouton{display:none}}
/* ---- Aujourd'hui (UX-D2, UX-D13, composants § 11 et § 15) ------------------------------------------------------------ */
.bl-texte{min-width:0}
.cockpit-salut{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cockpit-date{font-size:16px;color:var(--ink-2)}
.cockpit-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:16px;align-items:stretch}
.cockpit-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cockpit-col>.cockpit-parc,.cockpit-col>.cockpit-ensuite{flex:1 1 auto}
.cockpit-cote .card-h{padding-top:14px}.cockpit-cote .card-b{padding-top:10px;padding-bottom:14px}
.task.tache-accueil.compacte{align-items:center}
.task.tache-accueil.compacte .body{flex:1 1 0;min-width:0}
.task.tache-accueil.compacte>.row{flex:none;padding-left:0}
.task.tache-accueil.compacte>:not(.sev):not(.ico):not(.body):not(.row){flex-basis:100%}
.cockpit-parc{grid-area:parc} .cockpit-ensuite{grid-area:ensuite} .cockpit-cote{grid-area:cote}
.cockpit-parc .card-h h2,.cockpit-ensuite .card-h h2{font-size:17px}
.cockpit-parc .card-h small,.cockpit-ensuite .card-h small{font-size:13.5px;font-weight:500;margin-left:6px}
.cockpit-calme{color:var(--ink-2);font-size:17px;margin-top:12px}
.cockpit-vides{margin-top:12px}
.portes{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:0 0 10px;border-bottom:1px dashed var(--line)}
.portes-groupe{display:flex;flex-direction:column;gap:6px}
.portes-groupe+.portes-groupe{padding-left:14px;border-left:1px solid var(--line)}
.portes-groupe small{font-size:12.5px;color:var(--ink-2)}
.portes-rang{display:flex;gap:8px;flex-wrap:wrap}
.porte{display:block;width:22px;height:27px;border-radius:11px 11px 3px 3px;box-sizing:border-box}
.porte.louee{background:var(--brand)}
.porte.libre{border:2px dashed var(--gris-1);background:#fff}
.chose-a-faire{flex-wrap:wrap}
.chose-a-faire .caf-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.chose-a-faire .caf-actions form{display:inline}
.chose-a-faire .btn-accent svg{width:16px;height:16px}
.btn-sur-nuit{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-sur-nuit:hover{background:rgba(255,255,255,.10);color:#fff}
.chose-a-faire>:not(.caf-ic):not(.caf-corps):not(.caf-actions){flex-basis:100%}
.task.compacte{padding:10px 12px;gap:12px}
.task.compacte .ico{width:34px;height:34px;border-radius:50%}
.task.compacte .body b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task.compacte>.row{flex:none;flex-wrap:nowrap!important;gap:6px}
.task.compacte .btn-sm{min-height:34px;padding:6px 10px;font-size:13px}
.task.compacte .body small{display:block;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task.compacte .sev{display:none}
.automatique-liste.prochainement{list-style:none;margin:0;padding:0}
.automatique-liste.prochainement li{display:flex;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.automatique-liste.prochainement li:first-child{border-top:0}
.date-pave{display:grid;place-items:center;width:36px;min-height:36px;border-radius:8px;background:var(--surface-3);flex:none;line-height:1.05}
.date-pave b{font-size:14px;font-weight:700} .date-pave small{font-size:9.5px;font-weight:700;color:var(--ink-3)}
.date-pave svg{width:14px;height:14px;stroke:var(--st-vert-ink);fill:none;stroke-width:2.2}
@media (max-width:1100px){.cockpit-grille{grid-template-columns:1fr}}
.automatique-liste.prochainement li{justify-content:flex-start}
.automatique-liste.prochainement li a{flex:1;min-width:0}
body.bailleur .bandeau{padding-top:14px;padding-bottom:14px}
body.bailleur .chose-a-faire{padding:12px 16px}
body.bailleur .main>.pied-legal{padding:8px 12px!important;font-size:11.5px!important;line-height:1.45}
.automatique-liste.prochainement .date-pave{height:36px;align-self:center}
body.bailleur .content{padding:20px 24px}
body.bailleur .page-head{margin-bottom:14px}
.bandeau-phrase{margin:6px 0 8px}
@media (min-width:801px){body.bailleur .main>.pied-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:5px}body.bailleur .main>.pied-legal br{display:none}}
.cockpit-ensuite{display:flex;flex-direction:column}
.cockpit-col .card-h{padding:14px 20px 0}
.cockpit-col .card-b{padding:12px 20px 14px}
.cockpit-col .card-title .ic{width:28px;height:28px;border-radius:8px}
.cockpit-col .card-title h2{font-size:17px}
.cockpit-col .card-f{padding:10px 20px}
body.bailleur .bandeau{padding-top:12px;padding-bottom:12px}
body.bailleur .content{padding-top:16px}
body.bailleur .chose-a-faire{padding:10px 16px;margin-bottom:14px}
body.bailleur .bandeau{margin-bottom:14px}
.cockpit-grille,.cockpit-col{gap:14px}
/* ---- Mes biens (UX-D4, UX-D27) : lignes compactes, vignette du bien ------------------------------------------------- */
.bandeau-info{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.liste-biens .bien-ligne{padding:10px 18px;gap:14px;align-items:center}
.liste-biens .bien-ligne-corps{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
.liste-biens .bien-ligne-tete{display:contents}
.liste-biens .bien-ligne-unites{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.liste-biens .unite-pastille{padding:3px 9px;font-size:12.5px;border-radius:999px}
.jauge-legende .cle-vert::before{background:var(--st-vert-barre)} .jauge-legende .cle-bleu::before{background:var(--st-bleu-barre)} .jauge-legende .cle-ambre::before{background:var(--st-ambre-barre)} .jauge-legende .cle-rouge::before{background:var(--st-rouge-barre)} .jauge-legende .cle-gris::before{background:var(--st-gris-barre)}
.jauge-legende:has(.cle){justify-content:flex-start;column-gap:18px}
.liste-biens .bien-ligne-tete>div:first-child{min-width:0}
.bl{padding:6px 0}
body.bailleur .content .select.u-width-auto{min-height:40px;height:40px;padding-top:6px;padding-bottom:6px;font-size:14px}
body.bailleur .content .row.between.wrap.mb-2{row-gap:10px;margin-bottom:14px!important}
.bl{padding:4px 0;gap:10px}
.bl-rond{width:28px;height:28px}
.bl-titre{font-size:13.5px} .bl-sous{font-size:12px}
.bandeau-lignes-titre{margin-bottom:0}
body.bailleur .content .row.between.wrap.mb-2 .select.u-width-auto{max-width:178px;text-overflow:ellipsis}
.cellule-bien{display:flex;align-items:center;gap:10px}
/* Tableaux des pages d'objet : lignes plus serrées (regle-une-page § 1). */
body.bailleur .content .table td{padding-top:7px;padding-bottom:7px}
.btn-mis-en-avant{border-color:var(--brand);color:var(--brand)}
/* 3.14.32 (UX-D27) : « Identité du bien » */
.vignette-bien.geante{width:60px;height:60px;border-radius:16px;font-size:22px}
.bouton-identite{padding:0;border:0;background:none;cursor:pointer;border-radius:16px}
.bouton-identite:hover .vignette-bien{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--brand-4)}
.identite-couleurs{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.identite-couleurs legend{font-weight:650;margin-bottom:8px}
.identite-couleurs .chip{gap:8px;padding:5px 12px 5px 6px}
.identite-couleurs input{position:absolute;opacity:0;pointer-events:none}
.identite-couleurs .chip:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
/* 3.14.32 (UX-D17) : gravité des demandes */
.badge.gravite-rouge{background:var(--st-rouge-bg);color:var(--st-rouge-ink)} .badge.gravite-ambre{background:var(--st-ambre-bg);color:var(--st-ambre-ink)} .badge.gravite-bleu{background:var(--st-bleu-bg);color:var(--st-bleu-ink)} .badge.gravite-gris{background:var(--st-gris-bg);color:var(--st-gris-ink)}
.filtres-gravite{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px}
.filtres-gravite .chip{font-size:13px;min-height:30px;padding:4px 10px}
.filtres-gravite input,.gravite-choix input{position:absolute;opacity:0;pointer-events:none}
.filtres-gravite .chip:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
[class^="point-"]{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.point-rouge{background:var(--st-rouge-barre)} .point-ambre{background:var(--accent)} .point-bleu{background:var(--st-bleu-barre)} .point-gris{background:var(--st-gris-barre)}
.gravite-choix{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.gravite-libelle{font-size:12.5px;color:var(--ink-2);margin-right:4px}
.gravite-choix .chip{font-size:13px;min-height:30px;padding:4px 10px}
.regles-gravite{padding:8px 16px 14px;border-top:1px solid var(--line)}
.regles-gravite summary{cursor:pointer;font-weight:600;font-size:13.5px}
.regles-gravite ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px;font-size:13px}
/* 3.14.33 (maquette « Argent ») : vue d'ensemble */
.argent-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"biens mois etsi" "pese declaration etsi";gap:14px;align-items:stretch}
.argent-biens{grid-area:biens}.argent-mois{grid-area:mois}.argent-etsi{grid-area:etsi}.argent-pese{grid-area:pese}.argent-declaration{grid-area:declaration}
.argent-grille .card-h{padding:14px 18px 0}.argent-grille .card-b{padding:10px 18px 14px}.argent-grille h2{font-size:17px}
.argent-bien{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 0;color:inherit;text-decoration:none!important}
.argent-bien-corps{min-width:0;display:flex;flex-direction:column;gap:4px}.argent-bien-tete{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}.argent-bien-tete b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.positif{color:var(--st-vert-ink)}.negatif{color:var(--st-rouge-du)}.argent-bien-montant{font-size:14px;white-space:nowrap}
.barre-fine{display:block;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}.barre-fine i{display:block;height:100%;border-radius:3px}.barre-fine i.vert{background:var(--st-vert-plein)}.barre-fine i.rouge{background:var(--st-rouge-haut)}.barre-fine i.gris{background:var(--gris-2)}
.histogramme{display:flex;align-items:flex-end;gap:6px;height:120px}.histogramme .colonne{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}.histogramme .colonne i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--st-vert-plein);min-height:2px}.histogramme .colonne.futur i{background:transparent;border:1.5px dashed var(--st-gris-barre)}.histogramme .colonne.courant small{font-weight:700;color:var(--ink)}.histogramme small{font-size:11px;color:var(--ink-3)}
.hb-0{height:0%}.hb-1{height:1%}.hb-2{height:2%}.hb-3{height:3%}.hb-4{height:4%}.hb-5{height:5%}.hb-6{height:6%}.hb-7{height:7%}.hb-8{height:8%}.hb-9{height:9%}.hb-10{height:10%}.hb-11{height:11%}.hb-12{height:12%}.hb-13{height:13%}.hb-14{height:14%}.hb-15{height:15%}.hb-16{height:16%}.hb-17{height:17%}.hb-18{height:18%}.hb-19{height:19%}.hb-20{height:20%}.hb-21{height:21%}.hb-22{height:22%}.hb-23{height:23%}.hb-24{height:24%}.hb-25{height:25%}.hb-26{height:26%}.hb-27{height:27%}.hb-28{height:28%}.hb-29{height:29%}.hb-30{height:30%}.hb-31{height:31%}.hb-32{height:32%}.hb-33{height:33%}.hb-34{height:34%}.hb-35{height:35%}.hb-36{height:36%}.hb-37{height:37%}.hb-38{height:38%}.hb-39{height:39%}.hb-40{height:40%}.hb-41{height:41%}.hb-42{height:42%}.hb-43{height:43%}.hb-44{height:44%}.hb-45{height:45%}.hb-46{height:46%}.hb-47{height:47%}.hb-48{height:48%}.hb-49{height:49%}.hb-50{height:50%}.hb-51{height:51%}.hb-52{height:52%}.hb-53{height:53%}.hb-54{height:54%}.hb-55{height:55%}.hb-56{height:56%}.hb-57{height:57%}.hb-58{height:58%}.hb-59{height:59%}.hb-60{height:60%}.hb-61{height:61%}.hb-62{height:62%}.hb-63{height:63%}.hb-64{height:64%}.hb-65{height:65%}.hb-66{height:66%}.hb-67{height:67%}.hb-68{height:68%}.hb-69{height:69%}.hb-70{height:70%}.hb-71{height:71%}.hb-72{height:72%}.hb-73{height:73%}.hb-74{height:74%}.hb-75{height:75%}.hb-76{height:76%}.hb-77{height:77%}.hb-78{height:78%}.hb-79{height:79%}.hb-80{height:80%}.hb-81{height:81%}.hb-82{height:82%}.hb-83{height:83%}.hb-84{height:84%}.hb-85{height:85%}.hb-86{height:86%}.hb-87{height:87%}.hb-88{height:88%}.hb-89{height:89%}.hb-90{height:90%}.hb-91{height:91%}.hb-92{height:92%}.hb-93{height:93%}.hb-94{height:94%}.hb-95{height:95%}.hb-96{height:96%}.hb-97{height:97%}.hb-98{height:98%}.hb-99{height:99%}.hb-100{height:100%}
.piste{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}.piste:has(input:checked){border-color:var(--select-line);background:var(--select-bg)}.piste small{display:block;font-size:12.5px;color:var(--ink-2)}.piste input{width:18px;height:18px}
.piste-total{padding:12px 14px;border-radius:12px;background:var(--st-vert-bg);display:grid;gap:2px}.piste-total b{font-size:28px;color:var(--st-vert-ink)}
.ligne-barre{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13.5px}.ligne-barre .barre-fine{grid-column:1/-1}
.pastilles-periode{display:flex;gap:6px}
@media (max-width:1100px){.argent-grille{grid-template-columns:1fr;grid-template-areas:"biens" "mois" "etsi" "pese" "declaration"}}
.argent-pese .card-b.stack,.argent-declaration .card-b.stack{gap:6px}.argent-grille .piste{padding:8px 12px}.argent-etsi .card-b.stack{gap:8px}
.argent-grille{gap:12px}
/* 3.14.33 (SIG-02) : « Depuis votre visite » */
.page-head:has(.depuis-visite)>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;flex:1}
.depuis-visite{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.depuis-libelle{font-size:13.5px;color:var(--ink-2)}
.depuis-pastille{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none!important}
.depuis-pastille svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.depuis-pastille i{width:7px;height:7px;border-radius:50%;background:currentColor}
.depuis-pastille.vert{background:var(--st-vert-bg);color:var(--st-vert-ink)} .depuis-pastille.ambre{background:var(--st-ambre-bg);color:var(--st-ambre-ink)} .depuis-pastille.bleu{background:var(--st-bleu-bg);color:var(--st-bleu-ink)} .depuis-pastille.gris{background:var(--st-gris-bg);color:var(--st-gris-ink)}
body.bailleur .page-head:has(.depuis-visite){flex-wrap:nowrap;align-items:flex-start}
body.bailleur .page-head:has(.depuis-visite)>div:first-child{flex:1 1 0;min-width:0}
.depuis-visite{margin-left:0;flex-basis:100%;margin-top:4px}
.depuis-visite .btn-sm{min-height:30px;padding:4px 10px}
.selecteur-patrimoine .btn{min-height:44px;gap:8px}.selecteur-patrimoine .dd-menu a[aria-current]{font-weight:650;color:var(--brand)}
/* 3.14.33 (maquette « Patrimoine ») */
.patrimoine-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.patrimoine-grille .card-h{padding:14px 18px 0}.patrimoine-grille .card-b{padding:10px 18px 14px}.patrimoine-grille h2{font-size:17px}
.histogramme-haut{height:170px}.histogramme-haut .colonne i{background:var(--st-vert-plein)}
.jalon{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none!important;padding:4px 0}
.jalon small{display:block;font-size:12.5px;color:var(--ink-2)} .jalon .date-pave{width:46px}
@media (max-width:1100px){.patrimoine-grille{grid-template-columns:1fr}}
/* 3.14.34 (maquette « Avenir et projets », C2) */
.avenir-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"hyp res" "act act";gap:16px 28px;align-items:start}
.avenir-hypotheses{grid-area:hyp;background:var(--select-bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:12px}
.avenir-hyp-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.etiquette-petite{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.avenir-hyp-tete .segment button[aria-selected="true"]{background:#fff;color:var(--select-ink);box-shadow:var(--sh-1)}
.avenir-panneau{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.avenir-panneau[hidden]{display:none}
.avenir-groupe{display:grid;gap:6px}.avenir-groupe .chips{margin:0}
.avenir-label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.avenir-propres{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.avenir-propres .field{margin:0}
.avenir-resultat{grid-area:res;display:grid;gap:10px;min-width:0}
.avenir-phrase{font-size:22px;line-height:1.3;margin:0;color:var(--ink)}
.avenir-gain{margin:0;color:var(--ink-2)}
.avenir-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.avenir-tuile{border-radius:12px;padding:10px 12px;display:grid;gap:2px;border:1px solid transparent}
.avenir-tuile span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650}.avenir-tuile svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.avenir-tuile b{font-size:20px}.avenir-tuile small{font-size:12px;color:var(--ink-2)}
.avenir-tuile.vert{background:var(--st-vert-bg);color:var(--st-vert-ink)}.avenir-tuile.bleu{background:var(--st-bleu-bg);color:var(--st-bleu-ink)}.avenir-tuile.ambre{background:var(--st-ambre-bg);color:var(--st-ambre-ink)}
.avenir-detail summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:14px}
.avenir-detail dl{margin:8px 0 0;display:grid;gap:4px}.avenir-detail dl div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0;border-bottom:1px solid var(--line-2)}
.avenir-detail dt small{display:block;color:var(--ink-3);font-size:12px}.avenir-detail dd{margin:0;font-weight:600;white-space:nowrap}
.avenir-actions{grid-area:act;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.avenir-actions small{margin-left:auto}
.avenir-pistes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.avenir-piste{display:grid;gap:6px;padding:14px 16px;color:inherit;text-decoration:none!important;align-content:start}
.avenir-piste:hover{border-color:var(--select-line)}
.avenir-piste-icone{width:34px;height:34px;border-radius:9px;background:var(--select-bg);color:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.avenir-piste-icone svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.avenir-piste-texte{font-size:13.5px;color:var(--ink-2)}
.lien-fleche{color:var(--brand);font-weight:600;font-size:13.5px}
.avenir-projet{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0}
.avenir-projet-corps small{display:block;color:var(--ink-2);font-size:12.5px}
.avenir-projet-actions{display:flex;gap:6px;align-items:center}
@media (max-width:1000px){.avenir-corps{grid-template-columns:1fr;grid-template-areas:"hyp" "res" "act"}.avenir-tuiles{grid-template-columns:1fr}}
.avenir-simulation .card-h{padding:12px 18px 0}.avenir-simulation .card-b{padding:10px 18px 14px}.avenir-simulation h2{font-size:17px}
.avenir-hypotheses{gap:8px;padding:12px 14px}.avenir-groupe{gap:4px}.avenir-groupe .chip{padding:5px 11px}
.avenir-phrase{font-size:21px}.avenir-tuile{padding:8px 10px}.avenir-tuile b{font-size:18px}
.avenir-pistes{margin:12px 0;gap:10px}.avenir-piste{padding:12px 14px;gap:4px}.avenir-piste-icone{width:30px;height:30px}
.avenir-projets .card-h{padding:12px 18px 0}.avenir-projets .card-b{padding:8px 18px 12px}.avenir-projets h2{font-size:17px}.avenir-projets .cockpit-calme{margin:0;font-size:15px}
.etape-suivante>span{display:inline-flex;align-items:center;gap:8px}.etape-suivante svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;color:var(--accent)}
.page-head:has([data-test="banque-depuis-avenir"]){flex-wrap:nowrap;align-items:flex-start}.page-head:has([data-test="banque-depuis-avenir"])>div:first-child{flex:1 1 0;min-width:0}
.badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;vertical-align:-1px}
/* 3.14.34 (suite de C7) : règles de gravité modifiables */
.regles-gravite-form{gap:8px;padding-top:8px;border-top:1px dashed var(--line)}
.regle-gravite-ligne{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;align-items:center;font-size:13px}
.regle-gravite-ligne .input{min-height:34px;padding:4px 8px;font-size:13px}
/* 3.14.34 (SIG-03, C14) : la vie du bail */
.vie-bail{padding:12px 18px 12px;margin-bottom:12px}
.vie-bail-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.vie-bail-tete h2{font-size:17px;margin:0}
.vie-bail-pourquoi{margin-left:auto;font-size:13.5px;font-weight:600}
.vie-frise{list-style:none;margin:12px 0 8px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:relative}
.vie-jalon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative;padding:0 4px;min-width:0}
.vie-jalon::before{content:"";position:absolute;top:9px;left:-50%;right:50%;height:2px;background:var(--line)}
.vie-jalon:first-child::before{display:none}
.vie-jalon.fait::before,.vie-jalon.fait+.vie-jalon::before{background:var(--st-vert-plein)}
.vie-jalon.prochain::before{background:linear-gradient(90deg,var(--st-vert-plein),var(--accent))}
.vie-point{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center}
.vie-point svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3}
.vie-jalon.fait .vie-point{background:var(--st-vert-plein);border-color:var(--st-vert-plein)}
.vie-jalon.regulariser .vie-point{border-color:var(--brand);border-width:2.5px}
.vie-jalon.prochain .vie-point{background:var(--accent);border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.vie-jalon b{font-size:13px;font-weight:650;line-height:1.25}.vie-jalon small{font-size:12px;color:var(--ink-3)}
.vie-jalon.regulariser small{color:var(--brand);font-weight:600}
.vie-bail-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}.vie-bail-pied p{margin:0}
@media (max-width:760px){.vie-frise{grid-auto-flow:row;gap:10px;justify-items:start}.vie-jalon{flex-direction:row;text-align:left;align-items:baseline;gap:8px}.vie-jalon::before{display:none}.vie-jalon small{margin-left:auto}}
/* 3.14.34 (C11) : réglages des documents */
.signature-zone{width:100%;max-width:420px;height:140px;border:1px dashed var(--line);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.signature-apercu img{max-height:70px;max-width:260px;border:1px solid var(--line-2);border-radius:8px;padding:4px;background:#fff}
.signature-sep{border:0;border-top:1px solid var(--line-2);margin:6px 0}
.phrase-apercu{margin:0;color:var(--ink-2)}
/* 3.14.35 (maquette « Preuve », DOC-13) : la page publique de vérification */
.public-cadre:has(.preuve-page){max-width:820px}
.preuve-page{display:grid;gap:14px}
.preuve-adresse{margin:0;font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.preuve-titre{font-family:var(--serif);font-weight:600;font-size:32px;margin:0;color:var(--ink)}
.preuve-verdict{display:flex;gap:16px;align-items:center;padding:18px 22px}
.preuve-verdict h2{font-family:var(--serif);font-size:26px;margin:0;color:var(--st-vert-ink)}.preuve-verdict p{margin:2px 0 0;color:var(--ink-2)}
.preuve-sceau{width:52px;height:52px;border-radius:50%;background:var(--nuit);box-shadow:0 0 0 3px var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
.preuve-sceau svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8}
.preuve-depot-cadre{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:16px 20px;border:1.5px dashed var(--line);border-radius:14px;background:#fff}
.preuve-depot-cadre>svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.8;margin-top:28px}
.preuve-encart{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 22px;border-radius:14px;background:var(--nuit);color:#fff}
.preuve-encart b{font-size:19px}.preuve-encart p{margin:4px 0 0;color:rgba(255,255,255,.85);font-size:14px}
.preuve-responsabilite{margin:0}
.card[data-replie-bureau]>.card-h{cursor:pointer}
.card[data-replie-bureau]>.card-h::after{content:"›";margin-left:auto;font-size:1.4rem;color:var(--ink-3);transform:rotate(90deg);transition:transform 150ms}
.card[data-replie-bureau].replie>.card-h::after{transform:none}
.card[data-replie-bureau].replie>:not(.card-h){display:none}
@media print{.card[data-replie-bureau].replie>:not(.card-h){display:block}}
.bandeau-etat svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2.6}.bandeau-etat{white-space:nowrap}
/* ==== 3.15.2 : l'écran réel de Julien (1536 × 730 px CSS) ============================================================ */
/* 3.15.2 (UX-R4) : la page ne dépasse plus d'office la fenêtre. --hors-app = hauteur des bandeaux posés au-dessus de
l'application (démo, assistance) ; --hors-app-visible = la part encore visible quand on a défilé (ui.js). */
:root{--hors-app:0px;--hors-app-visible:0px}
body.bailleur .app{min-height:calc(100vh - var(--hors-app));min-height:calc(100dvh - var(--hors-app))}
body.bailleur .main{min-height:calc(100vh - var(--hors-app));min-height:calc(100dvh - var(--hors-app))}
@media (min-width:801px){
body.bailleur .sidebar{height:calc(100vh - var(--hors-app-visible));height:calc(100dvh - var(--hors-app-visible))}
/* 3.15.2 (UX-R4) : le pied du menu (Aide et support, compte) reste visible ; le menu défile au-dessus de lui. */
body.bailleur .sidebar .side-pied{position:sticky;bottom:-16px;margin:8px -12px -16px;padding:6px 12px 16px;background:var(--side-bg);box-shadow:0 -10px 14px -10px rgba(0,0,0,.45);z-index:2}
body.bailleur .sidebar .side-pied .side-aide{margin:4px 0}
}
@media print{body.bailleur .sidebar .side-pied{position:static}}
/* 3.15.2 (UX-R1) : plus de boîte à défilement interne de hauteur fixe (les max-height de la 3.14.31 à la 3.14.35 sont
retirées : Mes biens, Baux, Loyers, Agenda, « Ensuite », Registre, Argent, Patrimoine, Paramètres). La liste suit le
défilement de la page ; au-delà de N éléments ([data-limite]), un bouton « Afficher les N autres » (ui.js). */
body.bailleur .cockpit-ensuite>.card-b.defile{flex:1 1 auto;min-height:0}
body.bailleur .table-wrap:has(>.table){overflow-x:auto;overflow-y:visible}
.limite-cache{display:none!important}
.limite-pied{display:flex;justify-content:center;padding:6px 12px 10px}
.limite-pied .btn{color:var(--brand);font-weight:600}
@media print{.limite-cache{display:revert!important}.limite-pied{display:none}}
/* 3.15.2 (UX-R1, R8) : Messages : le seul cas où une boîte interne reste justifiée (fil et réponse) ; sa hauteur suit la
fenêtre, jamais une valeur fixe. */
@media (min-width:1000px){
body.bailleur .liste-demandes{max-height:calc(100dvh - var(--hors-app-visible) - 150px);min-height:260px}
body.bailleur .detail-demande .fil{max-height:calc(100dvh - var(--hors-app-visible) - 330px);min-height:180px}
}
/* 3.15.2 (UX-R2) : bandeau « + N » : les lignes au-delà de 2 ne s'affichent qu'à la demande sur un écran bas. */
.bl-plus{display:none;align-self:flex-start;margin-top:2px;padding:2px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.7);color:var(--brand);font-size:12.5px;font-weight:650;cursor:pointer}
.bl-plus:hover{background:#fff}
/* 3.15.2 (UX-R2) : en-tête, bandeau et menu compacts quand la fenêtre est basse (un portable à 125 %). */
@media (min-width:801px) and (max-height:800px){
:root{--topbar-h:52px}
body.bailleur .bandeau-demo{padding-top:5px;padding-bottom:5px}
body.bailleur .content{padding-top:12px}
body.bailleur .page-head{margin-bottom:10px}
body.bailleur .page-head h1{font-size:22px}
body.bailleur .page-head .sub{font-size:13px;margin-top:0}
body.bailleur .page-head .btn:not(.btn-sm){min-height:38px;padding-top:6px;padding-bottom:6px}
body.bailleur .bandeau{grid-template-columns:minmax(0,1fr) 380px;gap:24px;padding:8px 18px;margin-bottom:10px}
body.bailleur .bandeau.etat-ordre,body.bailleur .bandeau.etat-afaire{padding-left:24px}
body.bailleur .bandeau-phrase{font-size:22px;line-height:1.15;margin:3px 0 6px}
body.bailleur .bandeau .jauge{height:8px}
body.bailleur .bandeau .jauge-legende{margin-top:4px}
body.bailleur .bandeau-lignes{display:flex;flex-direction:column}
body.bailleur .bandeau-lignes .bl{padding:3px 0}
body.bailleur .bandeau-lignes .bl-rond{width:24px;height:24px}
body.bailleur .bandeau-lignes:not(.bl-tout) .bl:nth-of-type(n+3){display:none}
body.bailleur .bandeau-lignes .bl-plus{display:inline-flex}
body.bailleur .bandeau-lignes.bl-tout .bl-plus{display:none}
body.bailleur .chose-a-faire{padding:8px 14px;margin-bottom:10px}
body.bailleur .sidebar{padding-top:12px}
body.bailleur .sidebar .brand{padding-bottom:10px}
body.bailleur .sidebar .nav{gap:2px}
body.bailleur .sidebar .nav a{min-height:38px;padding-top:7px;padding-bottom:7px}
body.bailleur .sidebar .nav-deplier{top:1px}
body.bailleur .sidebar .nav .nav-sous{margin:2px 0 4px}
body.bailleur .sidebar .nav .nav-sous a{min-height:32px;padding-top:5px;padding-bottom:5px}
body.bailleur .sidebar .side-pied .side-aide{min-height:38px;padding-top:7px;padding-bottom:7px}
body.bailleur .sidebar .side-compte{padding:6px 8px}
}
/* 3.15.2 (UX-T2) : densité des listes : une ligne par élément (regle-une-page § 1 : 6 px de marge haute et basse). */
body.bailleur .content .table.table-dense td{padding-top:6px;padding-bottom:6px;vertical-align:middle}
body.bailleur .content .table.table-dense th{padding-top:8px;padding-bottom:8px}
.u-une-ligne{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.table-dense td.u-une-ligne,.table-dense .cellule-bien{max-width:280px}
.table-dense .cellule-bien a.u-une-ligne{max-width:none;min-width:0;display:block}
.table-dense .cellule-bien{min-width:0}
.table-dense td.num{white-space:nowrap}
.col-deplier{width:44px;text-align:right}
.btn-deplier{width:32px;height:32px;display:inline-grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer}
.btn-deplier:hover{background:var(--surface-2);color:var(--ink)}
.btn-deplier svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transform:rotate(90deg);transition:transform 150ms var(--ease)}
.btn-deplier[aria-expanded="true"] svg{transform:rotate(-90deg)}
.detail-bail{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;padding:4px 0}
@media (max-width:800px){.u-une-ligne{white-space:normal;max-width:none}}
/* 3.15.2 (UX-R2) : le titre de la colonne droite du bandeau tient sur une ligne. */
.bandeau-lignes-titre>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bandeau-lignes-titre>a{flex:none;white-space:nowrap}
/* 3.15.2 (UX-T4, D25) : puces de filtre à compteurs ; jamais pleines (fond #E3ECFB quand choisies). */
.filtres-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.puces{display:flex;flex-wrap:wrap;gap:6px}
.puce{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border:1px solid var(--line-bouton);border-radius:999px;background:#fff;color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.puce:hover{border-color:var(--select-line);color:var(--ink);text-decoration:none}
.puce.on,.puce[aria-pressed="true"],.puce[aria-current]{background:var(--select-bg);border-color:var(--select-line);color:var(--select-ink)}
body.bailleur .artisan-filtres a{min-height:34px;padding:4px 12px;font-weight:600;font-size:13.5px}
body.bailleur .artisan-filtres a.actif{background:var(--select-bg);border-color:var(--select-line);color:var(--select-ink)}
.filtres-form{flex-wrap:nowrap}
.dd-filtres{position:relative}
.dd-filtres>summary{list-style:none;cursor:pointer;min-height:40px;padding-top:6px;padding-bottom:6px}
.dd-filtres>summary::-webkit-details-marker{display:none}
.dd-filtres>summary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
.dd-filtres-corps{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:grid;gap:8px;min-width:240px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2)}
.dd-filtres-corps .select{max-width:none!important;width:100%}
[data-puce-cache]{display:none!important}
/* 3.15.2 (UX-T2) : Mes biens, une ligne par bien : vignette, nom et pastille, unités et locataires, loyer et état. */
body.bailleur .liste-biens .bien-ligne{padding:7px 18px;gap:12px}
body.bailleur .liste-biens .bien-ligne-corps{grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) auto;column-gap:18px}
body.bailleur .liste-biens .bien-ligne-tete>div:first-child{grid-column:1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bailleur .liste-biens .bien-ligne-tete>div:first-child br{display:none}
body.bailleur .liste-biens .bien-ligne-tete>div:first-child small{margin-left:8px}
body.bailleur .liste-biens .bien-ligne-tete>.txt-right{grid-column:3;grid-row:1;white-space:nowrap}
body.bailleur .liste-biens .bien-ligne-tete>.txt-right br{display:none}
body.bailleur .liste-biens .bien-ligne-tete>.txt-right small{margin-left:8px}
body.bailleur .liste-biens .bien-ligne-unites{grid-column:2;grid-row:1;margin-top:0;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
body.bailleur .liste-biens .unite-pastille{white-space:nowrap;flex:none}
@media (max-width:1100px){body.bailleur .liste-biens .bien-ligne-corps{grid-template-columns:minmax(0,1fr) auto}body.bailleur .liste-biens .bien-ligne-unites{grid-column:1/-1;grid-row:2;flex-wrap:wrap;-webkit-mask-image:none;mask-image:none;margin-top:4px}}
.u-nowrap{white-space:nowrap}
.table-dense td.cellule-statut{max-width:340px}
/* 3.15.2 (UX-T5) : un choix de période ou d'entité à côté du titre de la page, plutôt que sur sa propre rangée. */
.titre-et-choix{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.titre-et-choix .seg{margin:0}
.titre-et-choix .seg a{padding-top:4px;padding-bottom:4px}
/* 3.15.2 (UX-R5, T4) : une seule rangée de filtres, sans carte. */
.filtres-rangee{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.table-dense td.cellule-doc{max-width:420px}
body.bailleur .table-dense .btn-sm{min-height:30px;padding-top:3px;padding-bottom:3px}
.dd-filtres-corps label{font-size:13px}
.dd-filtres-corps .input{width:100%}
.titre-et-choix .dd-filtres>summary{min-height:34px;padding:4px 12px;font-size:13.5px;border-radius:999px}
/* 3.15.2 (UX-T6, composants § 5) : carte d'objet suivi : bordure haute de statut, vignette et titre, lignes, actions. */
.cartes-objets{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-items:start}
.carte-objet{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--st-gris-haut);border-radius:14px;padding:12px 16px 14px;min-width:0}
.carte-objet.bord-vert{border-top-color:var(--st-vert-barre)} .carte-objet.bord-ambre{border-top-color:var(--st-ambre-barre)} .carte-objet.bord-bleu{border-top-color:var(--brand)} .carte-objet.bord-rouge{border-top-color:var(--st-rouge-haut)} .carte-objet.bord-gris{border-top-color:var(--st-gris-haut)}
.co-tete{display:flex;align-items:center;gap:10px;min-width:0;padding-bottom:10px;border-bottom:1px solid var(--line)}
.co-initiales{background:var(--st-gris-bg);color:var(--st-gris-ink)}
.co-titres{display:flex;flex-direction:column;min-width:0}
.co-titre{font-size:14.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.co-titre:hover{color:var(--brand)}
.co-sous{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-lignes{margin:0;display:grid}
.co-lignes>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.co-lignes dt{font-size:12px;font-weight:600;color:var(--ink-2)}
.co-lignes dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;min-width:0}
.co-texte{color:var(--ink-2)}
.co-pied{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
/* composants § 6 : pastille de statut, un mot, point de la couleur d'encre */
.pastille-statut{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pastille-statut::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pastille-statut.st-vert{background:var(--st-vert-bg);color:var(--st-vert-ink)} .pastille-statut.st-ambre{background:var(--st-ambre-bg);color:var(--st-ambre-ink)} .pastille-statut.st-bleu{background:var(--st-bleu-bg);color:var(--st-bleu-ink)} .pastille-statut.st-rouge{background:var(--st-rouge-bg);color:var(--st-rouge-ink)} .pastille-statut.st-gris{background:var(--st-gris-bg);color:var(--st-gris-ink)}
.note-page{margin:12px 2px 0;font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start}
.note-page svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8}
/* 3.15.2 (UX-T2, R1) : Agenda : des lignes compactes (pavé de date, titre sur une ligne, délai, bien et marche à suivre
sur une ligne) ; 5 échéances par groupe, puis « Afficher la suite ». Le titre complet reste au survol. */
@media (min-width:801px){
body.bailleur .agenda-item{grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 16px}
body.bailleur .agenda-date{padding:4px 2px;border-radius:10px}
body.bailleur .agenda-date b{font-size:1.1rem}
body.bailleur .agenda-date small{display:none}
body.bailleur .agenda-corps{gap:2px}
body.bailleur .agenda-titre{flex-wrap:nowrap;min-width:0}
body.bailleur .agenda-titre b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bailleur .agenda-titre .badge{flex:none}
body.bailleur .agenda-meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;font-size:13px}
body.bailleur .agenda-que-faire{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
body.bailleur .agenda-actions .btn-sm{min-height:32px;padding-top:4px;padding-bottom:4px}
body.bailleur .agenda-groupe-titre{margin:4px 0 6px}
body.bailleur .agenda-filtre-bien{width:auto;min-height:36px;height:36px;padding-top:4px;padding-bottom:4px;font-size:14px}
}
body.bailleur .agenda-plus-menu .agenda-que-faire{display:block;white-space:normal;max-width:280px;padding:4px 6px 8px;color:var(--ink-2);font-size:12.5px;border-bottom:1px solid var(--line);margin-bottom:4px}
/* ==== 3.15.3 : Mon compte ============================================================================================ */
/* 3.15.3 (UX-T1) : sous-menu à gauche (maquette « Profil ») : carte blanche de 248 px, groupes en capitales, entrée
active sur fond bleu pâle avec liseré ; le contenu à droite. Sur téléphone et tablette, les onglets restent. */
.compte-grille{display:block}
.compte-menu{display:none}
@media (min-width:1200px){
.compte-grille{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;align-items:start}
.compte-menu{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--topbar-h) + 12px);padding:14px 12px;background:#fff;border:1px solid var(--line);border-radius:16px}
.compte-menu-groupe{padding:10px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.compte-menu-groupe:first-child{padding-top:2px}
.compte-menu a{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border-radius:10px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.compte-menu a:hover{background:var(--surface-2);text-decoration:none}
.compte-menu a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-2)}
.compte-menu a.on{background:var(--select-bg);color:var(--select-ink);font-weight:650;box-shadow:inset 3px 0 0 var(--brand)}
.compte-menu a.on svg{color:var(--select-ink)}
.compte-menu .compte-menu-aide{margin-top:8px;padding-top:12px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--brand)}
.compte-menu .compte-menu-aide svg{color:var(--brand)}
body.bailleur .onglets-section.onglets-compte{display:none}
body.bailleur [data-test="parametres-onglets"]{display:none}
}
@media (min-width:1200px) and (max-height:800px){
.compte-menu{padding:10px 10px}
.compte-menu a{min-height:32px;padding:4px 12px}
.compte-menu-groupe{padding-top:8px}
}
/* 3.15.3 (UX-T1, regle-une-page § 2) : les cartes du compte s'écoulent sur deux ou trois colonnes, sans trou. */
.compte-flux{columns:3 290px;column-gap:12px}
.compte-flux>*{break-inside:avoid;margin:0 0 12px;width:100%;display:inline-block}
.compte-flux>.card[data-replie-bureau].replie{display:inline-block}
@media (min-width:1001px){
.compte-contenu .card-h{padding:12px 16px 0;min-height:0}
.compte-contenu .card-b{padding:10px 16px 14px}
.compte-contenu .card-f{padding:10px 16px}
.compte-contenu .card-title h2{font-size:16px}
.compte-contenu .card-title .ic{width:28px;height:28px;border-radius:8px}
.compte-contenu .card-b.stack{gap:10px}
.compte-contenu .card[data-replie-bureau].replie>.card-h{padding-bottom:12px}
.compte-contenu .field{margin:0}
.compte-contenu .input,.compte-contenu .select{min-height:38px;padding-top:6px;padding-bottom:6px}
.compte-contenu .photo-profil .avatar.lg{width:52px;height:52px;font-size:18px}
}
/* 3.15.3 : un volet secondaire dans une carte (changer d'adresse e-mail…) : ouvert d'un clic. */
.sous-volet{border-top:1px solid var(--line);padding-top:8px}
.sous-volet>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--brand);list-style:none;display:flex;align-items:center;gap:6px}
.sous-volet>summary::-webkit-details-marker{display:none}
.sous-volet>summary::after{content:"›";transform:rotate(90deg);transition:transform 150ms;font-size:1.2rem;color:var(--ink-3)}
.sous-volet[open]>summary::after{transform:rotate(-90deg)}
.sous-volet[open]>summary{margin-bottom:8px}
/* 3.15.3 : trois colonnes explicites (l'ordre de lecture reste celui du code). */
.compte-colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.compte-colonnes>.stack{gap:12px;min-width:0}
.compte-colonnes.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1250px){.compte-colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.compte-colonnes,.compte-colonnes.deux{grid-template-columns:1fr}}
@media (min-width:1001px){
.compte-contenu .card-b,.compte-contenu .card-b p{font-size:14px;line-height:1.45}
.compte-contenu .alert{padding:8px 12px;font-size:13px}
.compte-contenu .sessions-liste .row b{font-size:14px}
.compte-contenu .sessions-liste .row small{font-size:12.5px}
}
@media (min-width:801px) and (max-height:800px){body.bailleur .content{padding-bottom:12px}}
/* 3.15.3 : des valeurs en lecture (libellé au-dessus, valeur en gras), comme la maquette « Organisation ». */
.lecture{margin:0;display:grid;gap:8px}
.lecture>div{display:grid;gap:1px}
.lecture dt{font-size:12.5px;color:var(--ink-2)}
.lecture dd{margin:0;font-weight:600;color:var(--ink);font-size:14px;overflow-wrap:anywhere}
/* 3.15.3 : une carte sur deux colonnes de la grille du compte ; un formulaire en deux colonnes. */
@media (min-width:1251px){.compte-colonnes>.colonne-double{grid-column:span 2}}
.form-deux-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-items:start}
.form-deux-colonnes>.form-pied{grid-column:1/-1}
.form-deux-colonnes h3{font-size:15px;margin:0}
.form-deux-colonnes .hint,.form-deux-colonnes small.muted{font-size:12.5px;line-height:1.4}
.form-deux-colonnes .grid.g-3{gap:8px}
@media (max-width:1000px){.form-deux-colonnes{grid-template-columns:1fr}}
/* 3.15.3 (maquette « Automatismes ») : les cases à cocher d'un réglage deviennent des interrupteurs (même champ, même envoi). */
.interrupteurs .check-input{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35}
.interrupteurs .check-input input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;margin:0;border-radius:999px;background:var(--st-gris-barre);position:relative;cursor:pointer;transition:background 150ms var(--ease)}
.interrupteurs .check-input input[type="checkbox"]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform 150ms var(--ease)}
.interrupteurs .check-input input[type="checkbox"]:checked{background:var(--brand)}
.interrupteurs .check-input input[type="checkbox"]:checked::after{transform:translateX(16px)}
.interrupteurs .check-input input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.interrupteurs .check-input input[type="checkbox"],.interrupteurs .check-input input[type="checkbox"]::after{transition:none}}
@media (min-width:1001px){.compte-contenu [data-panneau="gestion"] .card-b p,.compte-contenu [data-panneau="gestion"] .card-b small{font-size:12.5px;line-height:1.4}}
.interrupteurs .hint-bulle{margin:-4px 0 0 48px}
/* 3.15.3 : Notifications : préférences sur une ligne par événement, le service en petit à côté. */
@media (min-width:1001px){
.notifications-grille{gap:12px}
.notifications-grille #preferences td{white-space:nowrap}
.notifications-grille #preferences td:first-child{white-space:normal}
.notifications-grille #preferences td:first-child small{display:inline;margin-left:6px}
.notifications-grille #preferences td:first-child br{display:none}
.notifications-grille #preferences th{white-space:nowrap}
.notifications-grille #preferences .field .hint{font-size:12.5px}
}
@media (min-width:1001px){
.notifications-grille #preferences .card-b{gap:8px}
.notifications-grille #preferences .table-dense td{padding-top:3px;padding-bottom:3px}
.notifications-grille .span-5.stack{gap:12px}
}
/* 3.15.3 : les champs d'un formulaire de carte sur deux colonnes ; ce qui est long (cases, groupes, aide) prend toute la largeur. */
.grille-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:start}
.grille-champs>fieldset,.grille-champs>.check-input,.grille-champs>div:last-child,.grille-champs>.alert,.grille-champs>p,.grille-champs>small,.grille-champs>.pleine{grid-column:1/-1}
.grille-champs .hint{font-size:12.5px;line-height:1.4}
@media (max-width:800px){.grille-champs{grid-template-columns:1fr}}
.reparations-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media (max-width:900px){.reparations-colonnes{grid-template-columns:1fr}.reparations-colonnes>.table-wrap+.table-wrap thead{display:none}}
@media (min-width:1001px){
body.bailleur .content .reparations-colonnes .table.table-dense td{font-size:13.5px;line-height:1.3;padding:3px 10px}
body.bailleur .reparations-colonnes .table th{padding:6px 10px}
body.bailleur .reparations-colonnes .badge{font-size:12px;padding:1px 8px;white-space:nowrap}
body.bailleur .compte-contenu .tabs.mb-2{margin-bottom:10px!important}
}
/* 3.15.3 (maquette « Licences ») : cartes de formule compactes (nom, prix, accroche ; le détail à un clic), bilan sur une
ligne, achat sur deux colonnes (calcul ; paiement). */
@media (min-width:1001px){
.compte-contenu [data-test="licences-niveaux"]{align-items:start;gap:10px;margin-bottom:10px!important}
.compte-contenu [data-test="licences-niveaux"] .card-b{gap:4px;padding:12px 14px}
.compte-contenu [data-test="licences-niveaux"] .kpi{font-size:24px;line-height:1.15}
.compte-contenu [data-test="licences-niveaux"] .accroche{font-size:13.5px;line-height:1.3}
.compte-contenu .formule-detail{margin-top:4px;padding-top:6px}
.compte-contenu .formule-detail>summary{font-size:13px}
.compte-contenu .formule-detail small{font-size:12.5px}
.compte-contenu .bilan-compact .card-b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 16px}
.compte-contenu .bilan-compact .card-b>small{flex-basis:100%;font-size:12.5px}
.compte-contenu .bilan-compact .row{gap:6px}
.compte-contenu .licences-regles{align-items:center}
.compte-contenu .licences-regles .sous-volet{border:0;padding:0;flex:1}
.compte-contenu [data-test="licences-parc"] .card-b{padding:10px 16px;gap:6px}
.compte-contenu [data-test="licences-parc"] .btn-sm{min-height:32px;padding:4px 10px;font-size:13px;white-space:normal;text-align:left}
.achat-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}
.achat-grille>.card{margin-bottom:0!important}
.achat-grille>.alert{grid-column:1/-1}
.compte-contenu .achat-grille .card-b{gap:8px}
.compte-contenu .achat-grille .alert{padding:6px 10px}
.compte-contenu [data-test="licences-places"],.compte-contenu [data-test="licences-sms-usage"]{margin-bottom:6px!important}
}
@media (min-width:1001px){
.compte-contenu .alert-ligne{padding:6px 10px;align-items:center}
.compte-contenu .achat-parc{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.compte-contenu .achat-parc>b{font-size:13.5px}
.compte-contenu .achat-parc .btn-sm{min-height:30px;padding:3px 10px;font-size:12.5px;white-space:normal;text-align:left;justify-content:flex-start}
.compte-contenu .achat-parc small{font-size:12px}
.compte-contenu [data-test="licences-statut"]{padding:8px 12px;font-size:13px}
}
@media (min-width:1001px){
.compte-contenu .card.achat-parc{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.compte-contenu .card.achat-parc>b{flex-basis:100%}
.compte-contenu .card.achat-parc .licences-couvrir{gap:6px}
.achat-grille:has(>#acheter.replie){grid-template-columns:1fr}
.achat-grille:has(>#acheter.replie)>[data-test="licences-payer"]{display:none}
.compte-contenu .bilan-compact,.compte-contenu [data-test="licences-statut"]{margin-bottom:8px!important}
}
@media (min-width:1001px){
.compte-contenu .licences-entete{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-bottom:8px}
.compte-contenu .licences-entete>*{margin:0!important}
.compte-contenu .licences-replis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.compte-contenu .licences-replis>*{margin-bottom:0!important}
.compte-contenu .licences-replis>details[open],.compte-contenu .licences-replis>.achat-grille:has(>#acheter:not(.replie)){grid-column:1/-1}
.compte-contenu .licences-replis .formules-repli>summary small,.compte-contenu .licences-replis .formules-repli>summary .muted{display:none}
.compte-contenu .card.achat-parc .licences-couvrir{flex-wrap:nowrap}
.compte-contenu .card.achat-parc .licences-couvrir .btn-sm{flex:1 1 0}
.compte-contenu .onglets-fiche{margin-bottom:8px}
}
@media (min-width:1001px){
.compte-contenu .licences-entete{align-items:start}
.compte-contenu .bilan-compact .card-b{padding:8px 14px}
.compte-contenu .bilan-compact .card-b>b{font-size:13.5px}
.compte-contenu .bilan-compact .badge{font-size:12px}
.compte-contenu .kpi .kpi-unite{font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:0}
}
@media (min-width:1001px){
.compte-contenu .kpi .kpi-unite{white-space:nowrap}
.compte-contenu .card.achat-parc>b{flex-basis:auto}
.compte-contenu .card.achat-parc>.licences-couvrir{flex-basis:100%;order:2}
.compte-contenu .card.achat-parc>small{order:1;flex:1 1 0;min-width:240px}
.compte-contenu [data-test="licences-niveaux"] .formule-detail{margin-top:2px;padding-top:4px}
.compte-contenu .licences-regles{margin-bottom:6px!important}
}
/* 3.15.3 : sur la ligne des onglets, à droite : « Comment se comptent les licences » (s'ouvre en volet flottant) et TVA. */
@media (min-width:1300px){
.compte-contenu [data-panneau="formules"]{position:relative}
.compte-contenu [data-panneau="formules"]>.licences-regles{position:absolute;right:0;top:-50px;margin:0!important;gap:12px;flex-wrap:nowrap}
.compte-contenu .licences-regles .sous-volet{position:relative}
.compte-contenu .licences-regles .sous-volet[open]>.stack{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(520px,70vw);padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2)}
.compte-contenu .licences-regles .sous-volet>summary{white-space:nowrap}
.compte-contenu .licences-regles .segment a{padding-top:4px;padding-bottom:4px}
}
@media (min-width:1001px){
.compte-contenu .lots-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start}
.compte-contenu .lots-grille>small{grid-column:1/-1}
.compte-contenu .lots-grille .lot-bien{padding:6px 0;gap:2px}
.compte-contenu .lots-grille .lot-unite{font-size:13.5px}
.compte-contenu .lots-grille .lot-unite small{font-size:12px}
.compte-contenu [data-panneau="licences"]>.card{margin-bottom:10px!important}
}
@media (min-width:1001px){
.compte-contenu .lots-grille{display:block;columns:2;column-gap:28px}
.compte-contenu .lots-grille>.lot-bien{break-inside:avoid;display:flex}
.compte-contenu [data-test="licences-stock"] .table td,.compte-contenu [data-test="licences-stock"] .table th{padding-top:5px;padding-bottom:5px}
}
/* 3.15.3 : « Mes licences » : les unités d'un bien sur une ligne (puces), les biens sur deux colonnes équilibrées. */
@media (min-width:1001px){
.compte-contenu .lots-grille .lot-bien{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.compte-contenu .lots-grille .lot-bien>.row{flex-basis:100%}
.compte-contenu .lots-grille .lot-bien>small{flex-basis:100%}
.compte-contenu .lots-grille .lot-unite{display:inline-flex;padding:1px 8px;border-radius:999px;background:var(--surface-2);gap:4px}
.compte-contenu .lots-grille .lot-unite small{display:none}
.compte-contenu .lots-grille .lot-unite:has(small){border:1px dashed var(--line-bouton);background:#fff}
}
@media (min-width:1001px){.compte-contenu .lots-grille>small.legende-lots{display:block}}
@media (min-width:1001px){.compte-contenu .lots-grille .lot-bien>.lot-unite{flex:0 0 auto;width:auto;max-width:100%;margin:0}}
@media (min-width:1001px){
.compte-contenu .lots-grille{columns:3;column-gap:22px}
.compte-contenu .lots-grille .lot-bien>.row{flex-wrap:wrap;column-gap:6px;row-gap:2px;justify-content:flex-start}
.compte-contenu .lots-grille .lot-bien>.row>a{flex-basis:100%}
.compte-contenu .lots-grille .lot-bien>.row small{font-size:12px}
.compte-contenu .licences-mes>.card{margin-bottom:8px!important}
.compte-contenu .licences-mes>small{display:block;margin-bottom:6px!important}
}
@media (min-width:1001px){
.compte-contenu .lots-grille .lot-bien>.row:not(.lot-unite){display:contents}
.compte-contenu .lots-grille .lot-bien>.row:not(.lot-unite)>*:not(a){display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.compte-contenu:has([data-panneau="formules"][hidden]) .licences-entete>.bilan-compact{display:none}
}
@media (min-width:1001px){.compte-contenu [data-test="licences-stock"] .card-h{padding-top:10px}.compte-contenu .lots-grille .lot-bien{padding:5px 0}}
/* 3.15.3 : menu latéral réduit (801 à 1100 px) : le pied ne garde que l'avatar. */
@media (min-width:801px) and (max-width:1100px){body.bailleur .sidebar .side-compte{justify-content:center;padding:6px 0}body.bailleur .sidebar .side-compte>div{display:none}}