/* =========================================================
   2L-Log - feuille de style applicative
   Charte : bleu 2L PROM #0B63CE sur navy profond. Icones Font Awesome.
   ========================================================= */
:root{
  /* Marque : la palette est remplacee par celle de la societe du domaine servi
     (2l-log.2lprom.fr, 2l-log.2lvilla.fr). --on-brand est l'encre lisible SUR la
     marque : blanche sur le magenta de 2L VILLA, noire sur le vert anis de 2L PROM,
     ou le texte blanc serait illisible. --brand-rgb sert aux halos translucides. */
  --brand:#0b63ce; --brand-d:#0a55b0; --brand-x:#084a99; --brand-w:#e9f1fc; --brand-w2:#d5e5fa;
  --on-brand:#ffffff; --brand-rgb:11,99,206;
  /* Le menu garde le bleu de l'application quelle que soit la societe : c'est le
     reperage de l'outil, pas celui du chantier. Seul le contenu prend la couleur
     de la societe a laquelle appartient le chantier consulte. */
  --menu:#0b63ce; --menu-ink:#ffffff;
  /* Alias de la marque, utilise par une dizaine d'icones de titres dans les vues.
     Il n'avait jamais ete declare : ces icones sortaient sans couleur, et le
     defaut ne se voyait que si on les cherchait. */
  --accent:var(--brand-x);
  --bg:#f4f6fa; --surface:#fff; --ink:#111a26; --ink-2:#3a4757; --muted:#6b7787;
  --line:#e4e8ee; --line-2:#d3dae3;
  --side:#0d1725; --side-2:#1a2942; --side-ink:#aebbcd;
  --ok:#1e8f4e; --warn:#b7791f; --late:#d0342c; --info:#0b63ce;
  --ok-w:#e8f6ed; --warn-w:#fdf4e3; --late-w:#fdecea; --info-w:#e9f1fc;
  --radius:12px; --radius-s:9px;
  --sh:0 1px 2px rgba(17,26,38,.05),0 1px 3px rgba(17,26,38,.04);
  --sh-2:0 8px 28px rgba(17,26,38,.12);
  --rail:64px; --side-w:240px;
}
*,*::before,*::after{box-sizing:border-box}
/*
 * L'attribut hidden ne vaut qu'un display:none de la feuille du navigateur :
 * n'importe quelle classe qui declare un display le neutralise. Un calque
 * "cache" restait alors pose sur la page et avalait tous les clics. On lui
 * redonne la priorite une fois pour toutes.
 */
[hidden]{display:none !important}
html,body{margin:0;overflow-x:clip}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-x);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.25}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.only-sm{display:none}
.right{text-align:right}
.stack{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.mt{margin-top:16px}.mt-s{margin-top:10px}.mb{margin-bottom:16px}
i.fa-solid,i.fas{line-height:1}

/* ---------- Coquille plein ecran ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{width:var(--side-w);background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:40;transition:width .16s ease,transform .22s ease}
/* Marque du logiciel en tete du menu : le logo 2L LOG (envoye le 02/10/2026), texte
   blanc sur le bleu nuit, a la place des maisons et de « 2L-Log ». Le bord gauche de
   l'anneau s'aligne sur les intitules du menu. Replie en rail, il reste seul, reduit. */
.sidebar .brand{display:flex;align-items:center;gap:13px;padding:14px 14px 8px 18px;white-space:nowrap;
  overflow:hidden;flex:none}
.sidebar .brand-logo{display:block;flex:none;border-radius:50%}
.sidebar .brand-logo:focus-visible{outline:2px solid #5fa0f0;outline-offset:3px}
.sidebar .brand img{display:block;width:64px;height:64px}
.sidebar .brand small{display:block;font-size:10.5px;font-weight:650;line-height:1.45;letter-spacing:.9px;
  text-transform:uppercase;color:#8391a7}
/* Ecran bas (iPad en paysage, portable 13 pouces) : le logo cede un peu de hauteur au menu. */
@media(max-height:840px){
  .sidebar .brand{padding-top:10px}
  .sidebar .brand img{width:54px;height:54px}
}
.nav{padding:4px 9px 12px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;overflow-x:hidden}
.nav .section{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#65738c;font-weight:700;
  margin:14px 10px 5px;white-space:nowrap}
.nav a{color:var(--side-ink);padding:9px 11px;border-radius:8px;font-weight:500;display:flex;align-items:center;
  gap:12px;white-space:nowrap}
.nav a > i{width:18px;text-align:center;font-size:15px;flex:0 0 auto;opacity:.85}
.nav a:hover{background:var(--side-2);color:#fff;text-decoration:none}
.nav a.active{background:var(--menu);color:var(--menu-ink);font-weight:600}
.nav a.active > i{opacity:1}
.nav a .count{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.09);
  padding:1px 7px;border-radius:20px;color:#93a2b8}
.nav a.active .count{background:rgba(0,0,0,.2);color:#dbe8fb}
.nav a.soon{opacity:.42;cursor:default}
.nav a.soon:hover{background:none;color:var(--side-ink)}
.sidebar .foot{padding:10px;border-top:1px solid #1c2b44;display:flex;flex-direction:column;gap:6px}
.user{display:flex;align-items:center;gap:10px;min-width:0}
.user .av{width:32px;height:32px;border-radius:50%;background:var(--menu);color:var(--menu-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto}
.user .who{min-width:0;overflow:hidden}
.user b{color:#fff;font-size:12.5px;display:block;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.user small{color:#7f8da3;font-size:11px;white-space:nowrap}
.user .out{margin-left:auto;color:#7f8da3;font-size:14px;padding:5px 7px;border-radius:7px;flex:0 0 auto}
.user .out:hover{background:var(--side-2);color:#fff;text-decoration:none}
.railbtn{background:none;border:0;color:#65738c;font-size:12px;padding:5px 8px;border-radius:7px;cursor:pointer;
  display:flex;align-items:center;gap:9px;font-family:inherit;width:100%;white-space:nowrap}
.railbtn:hover{background:var(--side-2);color:#fff}
.railbtn i{width:18px;text-align:center;font-size:13px;flex:0 0 auto}

/* Mode rail : la barre se reduit aux icones, le contenu prend toute la largeur */
body.rail .sidebar{width:var(--rail)}
body.rail .sidebar .brand small,body.rail .nav a span,body.rail .nav a .count,
body.rail .nav .section,body.rail .user .who,body.rail .user .out,body.rail .railbtn span{display:none}
body.rail .sidebar .brand{justify-content:center;padding:14px 0 8px}
body.rail .sidebar .brand img{width:44px;height:44px}
body.rail .nav a{justify-content:center;padding:10px 0}
body.rail .nav .section{display:block;height:1px;margin:10px 12px;background:#1c2b44;overflow:hidden;text-indent:-999px}
body.rail .user{justify-content:center}
body.rail .railbtn{justify-content:center}
body.rail .main{margin-left:var(--rail)}

.main{flex:1;margin-left:var(--side-w);display:flex;flex-direction:column;min-width:0;transition:margin .16s ease}
.topbar{min-height:54px;display:flex;align-items:center;gap:12px;padding:8px 20px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar h1{font-size:17px;font-weight:700}
.topbar .sub{font-size:12px;color:var(--muted);margin-top:1px}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;
  width:36px;height:36px;font-size:15px;cursor:pointer;color:var(--ink)}
.content{padding:18px 20px 48px;width:100%}
.scrim{display:none;position:fixed;inset:0;background:rgba(13,23,37,.5);z-index:35}
body.nav-open .scrim{display:block}

/* ---------- Cartes / grilles ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh)}
.card.pad{padding:18px}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.card-h h3 i{color:var(--brand);font-size:14px}
.card-b{padding:18px}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ---------- KPI ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  box-shadow:var(--sh);display:flex;gap:13px;align-items:center}
.kpi .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--brand-w);color:var(--brand-x);flex:0 0 auto}
.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.kpi .val{font-size:24px;font-weight:750;line-height:1.15;margin-top:1px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:11.5px;color:var(--muted)}
.kpi.k-ok .ic{background:var(--ok-w);color:var(--ok)}
.kpi.k-warn .ic{background:var(--warn-w);color:var(--warn)}
.kpi.k-late .ic{background:var(--late-w);color:var(--late)}
.kpi.k-info .ic{background:var(--info-w);color:var(--info)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);
  color:var(--on-brand);border:1px solid var(--brand);border-radius:var(--radius-s);padding:9px 15px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d);text-decoration:none;color:var(--on-brand)}
.btn:active{transform:translateY(1px)}
.btn i{font-size:12.5px}
.btn.block{width:100%;padding:11px 18px;font-size:14px}
.btn.ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.btn.ghost:hover{background:var(--brand-w);border-color:var(--brand);color:var(--brand-x)}
.btn.ghost.on{background:var(--late-w);border-color:#f0c4c1;color:#a8271f}
.btn.danger{background:var(--late-w);border-color:#f0c4c1;color:#a8271f}
.btn.danger:hover{background:#fbdad7;border-color:#e8afab}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--muted);cursor:pointer;font-size:12.5px}
.btn-ico:hover{border-color:var(--brand);color:var(--brand-x);text-decoration:none}
.btn-ico.danger:hover{border-color:var(--late);color:var(--late)}
.btn-ico:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Bouton Retour de la barre du haut : la page d'avant, nommee (retour.js). */
.nav-retour{display:inline-flex;align-items:center;gap:8px;max-width:240px;min-height:36px;padding:6px 14px 6px 11px;
  border:1px solid var(--line-2);border-radius:19px;background:var(--surface);color:var(--ink);font-size:13px;
  font-weight:650;text-decoration:none;white-space:nowrap;flex:0 0 auto}
.nav-retour:hover{border-color:var(--brand);text-decoration:none}
.nav-retour i{font-size:13px;color:var(--brand-x)}
.nav-retour span{overflow:hidden;text-overflow:ellipsis}
.nav-retour[hidden]{display:none}
@media(max-width:640px){
  .nav-retour{width:40px;height:40px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  .nav-retour span{display:none}
}
/* Fleches d'ordre des plans de la fiche d'un logement, au format de celles du CR. */
.pl-ordre{display:inline-flex;gap:2px;margin:0}
.pl-ordre .btn-ico{width:26px;height:26px;font-size:11.5px}

/* ---------- Formulaires ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:5px}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],
input[type=tel],input[type=number],select,textarea{
  width:100%;border:1px solid var(--line-2);border-radius:var(--radius-s);padding:9px 12px;font-size:14px;
  font-family:inherit;color:var(--ink);background:var(--surface);transition:border-color .12s,box-shadow .12s}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16)}
input::placeholder,textarea::placeholder{color:#9aa5b4}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;padding:7px 11px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--surface);user-select:none}
.check input{accent-color:var(--brand);width:16px;height:16px;margin:0}
.check:has(input:checked){border-color:var(--brand);background:var(--brand-w);font-weight:600}
.form-grid{display:grid;gap:0 18px;grid-template-columns:repeat(2,1fr)}
.form-grid .full{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px 3px;margin:0 0 16px;background:var(--surface)}
legend{font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 6px}
.actions{display:flex;gap:10px;align-items:center;padding-top:4px}

/* ---------- Barre d'outils / filtres ---------- */
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{position:relative;flex:1;min-width:210px;max-width:400px}
.search input{padding-left:34px;border-radius:20px}
.search > i{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);pointer-events:none}
.seg{display:inline-flex;background:#e9edf3;border-radius:19px;padding:3px;gap:2px}
.seg a{padding:5px 13px;border-radius:16px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg a:hover{color:var(--ink);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chips a{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:19px;font-size:12.5px;
  font-weight:600;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.chips a:hover{border-color:var(--brand);text-decoration:none}
.chips a i{font-size:12px;opacity:.85}
.chips a b{font-weight:700;color:var(--muted);font-size:11.5px}
.chips a.on{background:var(--side);border-color:var(--side);color:#fff}
.chips a.on i,.chips a.on b{color:#7db1f5;opacity:1}
/* Corps d'etat entierement controle : le compte passe au vert, l'avancement se lit d'un coup d'oeil. */
.chips a.fait b{color:#15723c}
.chips a.on.fait b{color:#8fe3ad}

/* ---------- Puces / pastilles ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:19px;font-size:12px;
  font-weight:650;white-space:nowrap;color:var(--c,#475569);
  background:color-mix(in srgb,var(--c,#94a3b8) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--c,#94a3b8) 28%,#fff)}
.chip i{font-size:11.5px}
.chip-none{--c:#94a3b8}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:19px;font-size:11.5px;font-weight:700}
.pill i{font-size:11px}
.pill.ok{background:var(--ok-w);color:#15723c}
.pill.warn{background:var(--warn-w);color:#8f5d10}
.pill.late{background:var(--late-w);color:#a8271f}
.pill.none{background:#eef0f4;color:#657185}
.pill.info{background:var(--info-w);color:#08417f}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#cfd6e0;flex:0 0 auto}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.dot.late{background:var(--late)} .dot.none{background:#c9d1dc}
.tag-arch{background:#eef0f4;color:#657185;font-size:11px;font-weight:700;padding:1px 8px;border-radius:19px}

/* ---------- Tableaux ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px}
table.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;padding:9px 14px;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap}
table.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:#f8fafd}
table.tbl td.act{text-align:right;white-space:nowrap}
.tbl a.name{font-weight:650;color:var(--ink)}
.tbl a.name:hover{color:var(--brand)}

/* ---------- Groupes annuaire ---------- */
.group{margin-bottom:14px}
.group-h{display:flex;align-items:center;gap:10px;padding:8px 2px 8px 0;font-weight:700;font-size:14px}
.group-h .bar{width:4px;height:20px;border-radius:3px;background:var(--c,#94a3b8)}
.group-h > i{color:var(--c,#94a3b8);font-size:14px;width:18px;text-align:center}
.group-h .n{font-size:11.5px;font-weight:700;color:var(--muted);background:#eef0f4;padding:1px 9px;border-radius:19px}

/* ---------- Etats vides ---------- */
.empty{text-align:center;padding:42px 20px;color:var(--muted)}
.empty > i{font-size:30px;display:block;margin-bottom:12px;color:var(--line-2)}
.empty h3{font-size:15px;color:var(--ink);margin-bottom:5px}

/* ---------- Flash ---------- */
.flash{border-radius:var(--radius-s);padding:10px 14px;margin-bottom:14px;font-size:13.5px;font-weight:550;
  display:flex;align-items:center;gap:10px;border:1px solid transparent}
.flash.error{background:var(--late-w);color:#a8271f;border-color:#f0c4c1}
.flash.ok{background:var(--ok-w);color:#15723c;border-color:#c2e5cf}
.flash.info{background:var(--info-w);color:#08417f;border-color:#c5dcf7}
/* Le message d'une action s'affiche en bas de l'ecran, par-dessus la page, au lieu de la
   decaler en haut (retour de Laurent du 05/11/2026, position.js). Il laisse le coin bas
   droit au bouton flottant d'ajout rapide. */
.flash.flash-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:90;margin:0;width:max-content;max-width:min(640px,calc(100vw - 32px));box-shadow:var(--sh-2);
  padding:11px 12px 11px 15px;animation:flash-entre .22s ease-out}
.flash.flash-toast > span{flex:1;min-width:0}
.flash.flash-toast.flash-sort{opacity:0;transform:translate(-50%,8px);transition:opacity .25s,transform .25s}
.flash-x{background:none;border:0;color:inherit;opacity:.6;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;margin-left:4px}
.flash-x:hover{opacity:1}
@media(max-width:880px){ body.a-fab .flash.flash-toast{max-width:calc(100vw - 96px);left:16px;transform:none}
  body.a-fab .flash.flash-toast.flash-sort{transform:translateY(8px)} }
@keyframes flash-entre{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:880px){ body.a-fab .flash.flash-toast{animation:none} }
@media (prefers-reduced-motion:reduce){ .flash.flash-toast{animation:none} .flash.flash-toast.flash-sort{transition:none} }
/* Une ancre (#ratt-12) s'arrete sous la barre du haut, collante, au lieu de passer dessous. */
html{scroll-padding-top:calc(var(--topbar-h,62px) + 10px)}

/* ---------- Fiche ---------- */
.hero{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--sh);margin-bottom:16px}
.hero .ava{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:var(--brand-w);color:var(--brand-x);flex:0 0 auto}
.hero h2{font-size:19px;font-weight:750}
.hero .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:7px;font-size:13px;color:var(--ink-2)}
.hero .meta span{display:inline-flex;align-items:center;gap:7px}
.hero .meta i{color:var(--muted);font-size:12px;width:13px;text-align:center}
.dl{display:grid;grid-template-columns:145px 1fr;gap:8px 16px;font-size:13.5px}
.dl dt{color:var(--muted);font-weight:600}
.dl dd{margin:0}
.doc-line{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.doc-line:last-child{border-bottom:none}
.doc-line .nm{font-weight:600;min-width:185px}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:11px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand)}

/* ---------- Barres de repartition ---------- */
.bar-line{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar-line .lbl{flex:0 0 162px;font-size:13px;display:flex;align-items:center;gap:8px;min-width:0}
.bar-line .lbl i{width:16px;text-align:center;font-size:12px}
.bar-line .lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-line .track{flex:1;height:8px;border-radius:5px;background:#eaeef4;overflow:hidden}
.bar-line .track span{display:block;height:100%;border-radius:5px}
.bar-line .n{width:26px;text-align:right;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---------- Resume du cahier d'auto-controle ---------- */
/*
 * Sur la fiche d'un logement, l'avancement du cahier se lisait dans une phrase
 * grise : "0 point releve sur 357". Trois cent cinquante-sept points a relever,
 * c'est le gros du travail de reception, et cela doit se voir comme le reste des
 * compteurs de la page.
 */
.cahier{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.cahier .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--brand-w);color:var(--brand-x);flex:0 0 auto}
.cahier.fait .ic{background:var(--ok-w);color:var(--ok)}
.cahier .chiffre{flex:0 0 auto}
.cahier .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.cahier .val{font-size:26px;font-weight:750;line-height:1.1;margin-top:1px;font-variant-numeric:tabular-nums}
.cahier .val span{font-size:17px;font-weight:600;color:var(--muted)}
.cahier .sub{font-size:11.5px;color:var(--muted)}
/* La barre prend la place qui reste, et ne descend pas sous 170 px : en dessous
   elle ne dit plus rien et passe a la ligne. */
.cahier .jauge{flex:1 1 170px;min-width:170px}
.cahier .jauge .haut{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;font-size:12.5px}
.cahier .jauge .haut b{font-size:14px;font-variant-numeric:tabular-nums}
.cahier .jauge .track{height:9px;border-radius:5px;background:#eaeef4;overflow:hidden}
.cahier .jauge .track span{display:block;height:100%;border-radius:5px;background:var(--brand)}
.cahier.fait .jauge .track span{background:var(--ok)}
.cahier .act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
@media(max-width:700px){
  .cahier .act{margin-left:0;width:100%}
  .cahier .act .btn{flex:1;justify-content:center}
}

/* ---------- Carte d'operation ---------- */
/*
 * La liste des operations melange les chantiers des deux societes du groupe. La
 * couleur de celle qui traite le dossier est donc portee par la carte elle-meme,
 * et pas seulement par le filtre en haut de page : on voit d'un coup d'oeil ce
 * qui est a 2L PROM et ce qui est a 2L VILLA.
 *
 * Les nuances viennent de App\Societes::palette() : --soc la couleur de marque,
 * --soc-x la meme rendue lisible sur blanc (le vert anis ne se lit pas tel quel),
 * --soc-w son fond clair, --soc-xw l'encre lisible SUR ce fond clair, qui n'est
 * pas la meme : le magenta de 2L VILLA passe sur blanc et tombe sous le seuil
 * sur son propre rose.
 */
.op-carte{display:flex;flex-direction:column;border-left:3px solid var(--soc,var(--brand));
  transition:box-shadow .14s,transform .14s}
.op-carte:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.op-carte > .card-b{display:flex;flex-direction:column;flex:1;padding:14px 16px}

/* Entete : les deux etiquettes d'abord, le nom ensuite sur toute la largeur.
   Le nom partageait sa ligne avec la phase et se coupait en deux des 260 px. */
.op-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.op-soc{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:19px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  background:var(--soc-w,var(--brand-w));color:var(--soc-xw,var(--brand-x))}
.op-soc i{font-size:11px}
.op-nom{display:block;font-size:15.5px;font-weight:700;line-height:1.25;color:var(--ink);
  text-wrap:balance;margin:0}
a.op-nom:hover{color:var(--soc-x,var(--brand-x));text-decoration:none}
.op-ref{margin-top:3px;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-ref .mono{color:var(--ink-2)}

.op-meta{display:flex;flex-direction:column;gap:4px;margin-top:11px;font-size:12.5px;color:var(--ink-2)}
.op-meta > div{display:flex;align-items:center;gap:8px;min-width:0}
.op-meta i{width:14px;text-align:center;font-size:11.5px;color:var(--muted);flex:0 0 auto}
.op-meta span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le pied reste colle en bas, pour que les cartes d'une meme ligne s'alignent
   meme quand l'une porte une etiquette de retard et l'autre pas. */
.op-pied{margin-top:auto;padding-top:12px}
.op-actions{display:flex;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.op-actions .btn{flex:1;justify-content:center}

@media(max-width:560px){
  .op-h{gap:5px}
  .op-nom{font-size:15px}
}

/* ---------- Connexion ---------- */
.auth-body{margin:0;background:
  radial-gradient(1100px 520px at 12% -10%,rgba(var(--brand-rgb),.20),transparent 60%),
  radial-gradient(900px 460px at 88% 108%,rgba(var(--brand-rgb),.13),transparent 62%),#f4f6fa;min-height:100vh}
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 48px rgba(17,26,38,.13);padding:30px}
.auth-brand{display:flex;justify-content:center;margin-bottom:20px}
.auth-brand img{height:56px;object-fit:contain}
/* Logo pose en masque : un seul fichier par societe, la silhouette blanche, sert
   sur le bandeau sombre comme ici sur fond clair, teinte par la couleur courante.
   Evite de maintenir une variante de couleur par societe et par fond. */
.mk-logo{display:inline-block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain}
/* Le logo garde la teinte exacte de la charte, pas la variante assombrie : c'est
   un signe de marque, pas du texte, et le client doit le reconnaitre. */
.auth-brand .mk-logo{width:190px;height:56px;color:var(--brand)}
.hl-logo{width:150px;height:44px;color:var(--brand);margin-bottom:18px}
.auth-card h2{font-size:20px;margin-bottom:4px}
.auth-card .sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.auth-foot{text-align:center;font-size:11.5px;color:var(--muted);margin-top:18px}
/* Le logiciel signe le pied des pages de connexion, d'invitation et du portail, en
   petit : la tete de page reste a la societe (celle du domaine sur la connexion,
   celle du chantier sur le portail). */
.pied-logiciel{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;
  font-size:11.5px;color:var(--muted)}
.pied-logiciel img{display:block;width:36px;height:36px;flex:none}
/* Connexion et invitation (02/10/2026) : le logiciel 2L LOG en tete de carte, la
   societe du domaine au pied, a sa couleur. */
.auth-brand .logo-logiciel{width:104px;height:104px}
.pied-societe .mk-logo{width:84px;height:25px;flex:none;color:var(--brand)}

/* ---------- PWA : feuille d'installation + page hors ligne ---------- */
.pwa-sheet-back{position:fixed;inset:0;background:rgba(13,23,37,.5);z-index:9998;display:flex;align-items:flex-end;justify-content:center}
.pwa-sheet{background:var(--surface);color:var(--ink);width:100%;max-width:460px;border-radius:18px 18px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:pwaUp .25s ease}
@keyframes pwaUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pwa-sheet h3{margin:0 0 6px;font-size:16.5px}
.pwa-sheet p{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.5}
.pwa-sheet .step{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:9px;font-size:13.5px}
.pwa-sheet .step .n{width:23px;height:23px;flex:none;background:var(--brand);color:var(--on-brand);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.pwa-sheet .close{margin-top:8px;width:100%;padding:11px;border:0;border-radius:10px;background:var(--brand);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.off-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.off-card{max-width:400px}
.off-card img{height:64px;margin-bottom:20px}
.off-card h1{font-size:21px;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:10px}
.off-card p{color:var(--muted);margin:0 0 20px;line-height:1.55}
.off-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--late);animation:offpulse 1.6s infinite}
@keyframes offpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* En mode application installee, on gagne la place de la barre du navigateur */
@media all and (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top,0px)}
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){ .g-4,.g-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:880px){
  .sidebar{width:var(--side-w);transform:translateX(-100%);box-shadow:var(--sh-2)}
  body.nav-open .sidebar{transform:none}
  body.rail .sidebar{width:var(--side-w)}
  body.rail .sidebar .brand small,body.rail .nav a span,body.rail .nav a .count,
  body.rail .nav .section,body.rail .user .who,body.rail .user .out{display:revert}
  body.rail .sidebar .brand{justify-content:flex-start;padding:14px 14px 8px 18px}
  body.rail .sidebar .brand img{width:64px;height:64px}
  body.rail .nav a{justify-content:flex-start;padding:9px 11px}
  body.rail .nav .section{height:auto;margin:14px 10px 5px;background:none;text-indent:0}
  .main,body.rail .main{margin-left:0}
  .railbtn{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .content{padding:14px 13px 48px}
  .topbar{padding:8px 13px}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .g-2,.form-grid{grid-template-columns:1fr}
  .kpi{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .kpi .ic{width:32px;height:32px;font-size:14px;border-radius:9px}
  .kpi .val{font-size:20px}
  .kpi .lbl{font-size:10px}
  .kpi .sub{font-size:11px}
  .search{max-width:none}
  .dl{grid-template-columns:1fr;gap:2px 0}
  .dl dd{margin-bottom:9px}
  .doc-line{flex-wrap:wrap}
  .doc-line .nm{min-width:0;flex:1}
  /* Plans de la fiche d'un logement : le nom tient la ligne de sa vignette, les fleches,
     le compte de reperes et les boutons passent dessous au lieu de l'ecraser. */
  .pl-ligne{row-gap:7px}
  .pl-ligne .nm{flex:1 1 calc(100% - 80px)}
  .pl-ligne > .spacer{display:none}
  .bar-line .lbl{flex:0 0 115px}
}
@media(max-width:640px){
  .hide-sm{display:none !important}
  .only-sm{display:block}
  table.tbl th,table.tbl td{padding:9px 10px}
  .hero{padding:15px}
}

/* =========================================================
   Ajout rapide de reserve : bouton flottant et panneau
   ========================================================= */
/* Le bouton flottant occupe le coin bas droit. Le bandeau hors ligne passe au-dessus
   de lui (--hl-bas), et un ecran qui porte sa propre barre d'action en bas a droite
   range le bouton flottant plus haut : voir le cahier d'auto-controle. */
body.a-fab{--hl-bas:84px}
.ar-fab{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 20px;border:0;border-radius:30px;cursor:pointer;
  background:var(--brand);color:var(--on-brand);font-family:inherit;font-size:14.5px;font-weight:650;
  box-shadow:0 6px 20px rgba(var(--brand-rgb),.38);
  transition:background .12s,transform .12s,box-shadow .12s;
}
.ar-fab:hover{background:var(--brand-d);box-shadow:0 8px 26px rgba(var(--brand-rgb),.46)}
.ar-fab:active{transform:translateY(1px)}
.ar-fab i{font-size:15px}
.ar-fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
body.ar-ouvert{overflow:hidden}
body.ar-ouvert .ar-fab{opacity:0;pointer-events:none}

.ar-back{
  position:fixed;inset:0;z-index:70;background:rgba(13,23,37,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.ar-sheet{
  width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:18px 18px 0 0;box-shadow:0 -12px 44px rgba(13,23,37,.3);
  animation:arMonte .22s ease;
}
@keyframes arMonte{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ar-poignee{display:flex;justify-content:center;padding:9px 0 2px}
.ar-poignee span{width:38px;height:4px;border-radius:3px;background:var(--line-2)}
.ar-h{display:flex;align-items:center;gap:10px;padding:8px 18px 12px;border-bottom:1px solid var(--line)}
.ar-h h3{flex:1;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.ar-h h3 i{color:var(--brand);font-size:15px}
.ar-fermer{
  width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--muted);cursor:pointer;font-size:15px;
}
.ar-fermer:hover{border-color:var(--brand);color:var(--brand-x)}
.ar-b{padding:16px 18px 4px;overflow-y:auto;flex:1}
.ar-f{
  display:flex;gap:10px;padding:13px 18px calc(13px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--surface);border-radius:0 0 18px 18px;
}
.ar-f .btn{flex:1;justify-content:center}
.ar-etat{
  border-radius:var(--radius-s);padding:10px 13px;margin-bottom:14px;font-size:13.5px;font-weight:550;
  border:1px solid transparent;
}
.ar-etat.info{background:var(--info-w);color:#08417f;border-color:#c5dcf7}
.ar-etat.ok{background:var(--ok-w);color:#15723c;border-color:#c2e5cf}
.ar-etat.attention{background:var(--warn-w);color:#8f5d10;border-color:#f0dcb4}
.ar-etat.erreur{background:var(--late-w);color:#a8271f;border-color:#f0c4c1}

/* Le champ fichier natif est illisible sur mobile : on habille son etiquette. */
.ar-photo-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ar-photo-lab{
  display:flex !important;align-items:center;justify-content:center;gap:9px;
  padding:12px;border:1px dashed var(--line-2);border-radius:var(--radius-s);
  background:var(--paper);color:var(--ink-2);font-weight:600;cursor:pointer;margin:0 !important;
}
.ar-photo-lab:hover{border-color:var(--brand);color:var(--brand-x)}
.field.rempli .ar-photo-lab{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-w)}
#arEntAide{margin-top:5px}

/* Choix du plan avant « Poser sur le plan » (retour du 20/10/2026) : la grille de
   miniatures de l'ecran du plan (.rep-vign, reperage.css), dans le panneau. */
.ar-choix-t{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ar-choix-g{margin:12px 0 7px;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ar-choix-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding-bottom:12px}
.ar-vign{
  display:block;width:100%;padding:0;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;
}
.ar-vign .im{display:block;height:92px;background:var(--bg);border-bottom:1px solid var(--line)}
.ar-vign img{width:100%;height:100%;object-fit:contain;display:block}
.ar-vign .nm{display:block;padding:7px 9px 0;font-size:12.5px;font-weight:650;line-height:1.25}
.ar-vign .sb{display:block;padding:2px 9px 8px;font-size:11px;color:var(--muted)}
.ar-vign:hover{border-color:var(--brand)}
.ar-vign:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.2)}

@media(min-width:700px){
  .ar-back{align-items:center}
  .ar-sheet{border-radius:16px;max-height:88vh;animation:arFondu .16s ease}
  .ar-f{border-radius:0 0 16px 16px;padding-bottom:13px}
  .ar-poignee{display:none}
  @keyframes arFondu{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}
@media(max-width:880px){
  /* Sur mobile le bouton flottant ne doit pas masquer la barre d'action des listes. */
  .ar-fab{right:14px;bottom:14px;padding:13px 17px}
  .ar-fab span{display:none}
  .ar-fab{border-radius:50%;width:54px;height:54px;justify-content:center;padding:0}
  .ar-fab i{font-size:19px}
}

/* =========================================================
   Suivi des documents artisans, chantier par chantier
   ========================================================= */
.mp-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0}
.mp{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 7px;
  border:1px solid var(--line-2);border-radius:7px;background:var(--surface);cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px}
.mp:hover{border-color:var(--brand)}
.mp.ok{background:var(--ok-w);border-color:#c2e5cf;color:#15723c}
.mp.warn{background:var(--warn-w);border-color:#f0dcb4;color:#8f5d10}
.mp.none{background:#eef0f4;border-color:var(--line-2);color:#8b95a4;text-decoration:line-through}
/* DOC validee avec tolerance (retour du 05/11/2026) : bleu, toujours celui de l'application,
   quelle que soit la couleur de la societe du chantier. */
.mp.info{background:var(--info-w);border-color:#c5dcf7;color:#08417f}
.mp-notes{margin-top:6px;line-height:1.4}
/* Les marches de travaux : une rangee de pastilles, en nombre libre, precedee de
   son libelle pour ne pas se confondre avec celle des pieces. */
.mt-row{margin-bottom:5px}
.mt-lbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.mt-f{display:inline-flex;margin:0}
.mp.add{min-width:26px;padding:0 6px;color:var(--brand-x);border-style:dashed}
.mp.add:hover{background:var(--brand-w);border-style:solid}
.mt-notes{margin-top:5px;line-height:1.5}
.mt-notes b{font-size:10.5px;letter-spacing:.3px;color:var(--muted)}
/* Un formulaire par marche, sur deux rangees : sa grille est dans la section « Marches de
   travaux : date d'envoi » en fin de feuille (05/11/2026). */
.mt-form select,.mt-form input{padding:5px 8px;font-size:12.5px;min-width:0}
.mt-add{padding-top:8px;border-top:1px dashed var(--line-2)}
.mp-det{margin-top:7px}
.mp-det > summary{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--brand-x);list-style:none}
.mp-det > summary::-webkit-details-marker{display:none}
.mp-det > summary::before{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:8px;
  margin-right:5px;display:inline-block;transition:transform .15s}
.mp-det[open] > summary::before{transform:rotate(180deg)}
/* Une piece par formulaire : libelle, etat, date, note, bouton. Les champs passent a la ligne
   quand la cellule est etroite (317 px utiles a 1024 px d'ecran) : sur une seule grille de
   590 px, ils debordaient sur les colonnes Reserves et Actions (05/11/2026). */
.mp-form{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:10px}
.mp-form .mp-l{flex:1 1 150px;font-size:12px;font-weight:600;color:var(--ink-2)}
.mp-form select{flex:0 0 110px}
.mp-form input[type=date]{flex:0 1 136px}
.mp-form input[type=text]{flex:1 1 120px}
.mp-form .btn-ico{flex:0 0 auto}
/* Une piece par formulaire : les lignes se suivent de pres, comme une seule grille. */
.mp-form + .mp-form{margin-top:6px}
.mp-form select,.mp-form input{padding:5px 8px;font-size:12.5px;min-width:0}

/* Onglet Entreprises : les corps d'etat forment autant de tableaux. Les largeurs
   sont imposees pour qu'ils s'alignent tous, colonne par colonne, de haut en bas. */
.tbl-ent{table-layout:fixed;width:100%}
/* Detacher une entreprise du chantier : en toutes lettres sous son nom (retour du 14/10). */
.ent-detacher{margin:6px 0 0}
.ent-detacher button{display:inline;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:12px;font-weight:600;line-height:1.35;color:#a8271f}
.ent-detacher button:hover{text-decoration:underline}
.ent-detacher button i{font-size:11px;margin-right:4px}
.tbl-ent .c-ent{width:17%}
.tbl-ent .c-contact{width:16%}
.tbl-ent .c-docs{width:49%}
.tbl-ent .c-res{width:10%}
.tbl-ent .c-act{width:8%}
.tbl-ent td,.tbl-ent th{overflow-wrap:anywhere}
@media(max-width:1100px){
  /* La colonne Contact disparait : sa place va aux marches et aux pieces. */
  .tbl-ent .c-ent{width:22%}
  .tbl-ent .c-docs{width:54%}
  .tbl-ent .c-res{width:13%}
  .tbl-ent .c-act{width:11%}
}

/* =========================================================
   Onglets d'une operation : la navigation du chantier.
   Assez presents pour se voir, assez sobres pour ne pas
   voler la vedette au contenu.
   ========================================================= */
.tabs-op{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:2px}
.tabs-op a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  font-size:13.5px;font-weight:600;line-height:1.2;transition:border-color .12s,background .12s,color .12s}
.tabs-op a > i{font-size:13px;opacity:.75}
.tabs-op a b{font-weight:700;font-size:11.5px;padding:1px 7px;border-radius:11px;
  background:#eef1f6;color:var(--muted);font-variant-numeric:tabular-nums}
.tabs-op a:hover{border-color:var(--brand);color:var(--brand-x);text-decoration:none}
.tabs-op a:hover > i{opacity:1}
.tabs-op a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.28)}
.tabs-op a.on > i{opacity:1}
.tabs-op a.on b{background:rgba(0,0,0,.16);color:inherit}
@media(max-width:640px){
  .tabs-op{gap:6px}
  .tabs-op a{padding:8px 12px;font-size:13px}
}

/* ------------------------------------------------------------------ */
/* Modale (element <dialog>)                                           */
/* Le navigateur donne le fond, le piege de focus et la fermeture par   */
/* Echap : il ne reste que l'habillage.                                 */
/* ------------------------------------------------------------------ */
.mdl{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 28px));width:100%;
  max-height:calc(100vh - 48px)}
.mdl::backdrop{background:rgba(15,23,42,.44);backdrop-filter:blur(2px)}
.mdl form{display:flex;flex-direction:column;max-height:calc(100vh - 48px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(15,23,42,.24);overflow:hidden}
.mdl-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mdl-h h3{flex:1;margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.mdl-h h3 i{color:var(--brand-x);font-size:14px}
.mdl-x{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:16px;
  width:30px;height:30px;border-radius:8px}
.mdl-x:hover{background:var(--bg);color:var(--fg)}
.mdl-b{flex:1;min-height:0;overflow:auto;padding:14px 16px}
.mdl-f{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--bg)}

/* Recherche et liste de choix. */
.mdl-rech{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:12px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--bg)}
.mdl-rech i{color:var(--muted);font-size:13px}
.mdl-rech input{flex:1;border:0;background:transparent;font-family:inherit;font-size:13.5px;
  color:var(--fg);outline:0}
.mdl-liste{display:flex;flex-direction:column;gap:12px}
.mdl-grp-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:0 0 5px 2px}
.mdl-ent{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;margin-bottom:4px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-family:inherit;font-size:13.5px;color:var(--fg)}
.mdl-ent:hover:not(:disabled){border-color:var(--brand);background:var(--brand-w)}
.mdl-ent .n{flex:1;font-weight:650}
.mdl-ent .v{color:var(--muted);font-size:12px}
.mdl-ent > i{color:var(--brand-x);font-size:12px;opacity:0;transition:opacity .12s}
.mdl-ent:hover > i{opacity:1}
.mdl-ent:disabled{opacity:.55;cursor:default;background:var(--bg)}
.mdl-ent .d{font-size:11.5px;color:var(--ok-d,#15723c);font-weight:650;white-space:nowrap}
.mdl-vide{margin:6px 2px;font-size:13px;color:var(--muted)}

/* L'entreprise choisie, rappelee au-dessus des champs du marche. */
.mdl-choisi{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px;
  border-radius:10px;background:var(--brand-w);color:var(--brand-x);font-size:13.5px}
.mdl-choisi > i{font-size:14px}
.mdl-choisi > span{flex:1;min-width:0}
.mdl-choisi b{font-weight:700}
.mdl-choisi span span{color:var(--brand-d);font-size:12px}
.mdl-choisi button{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:650;color:var(--brand-x);text-decoration:underline}

@media(max-width:560px){
  .mdl{max-width:100vw;max-height:100vh}
  .mdl form{max-height:100vh;border-radius:0;border:0}
}

/* ------------------------------------------------------------------ */
/* Rattachement de plusieurs entreprises (onglet Entreprises)          */
/* Les cartes de la modale sont des cases a cocher ; la selection se   */
/* rappelle en pastilles, qu'un clic retire.                           */
/* ------------------------------------------------------------------ */
.ent-case{cursor:pointer}
.ent-case input{width:17px;height:17px;margin:0;flex:none;accent-color:var(--brand-x);cursor:pointer}
.ent-case:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16)}
.ent-case.on{border-color:var(--brand);background:var(--brand-w)}
.ent-case.deja,.ent-case.deja:hover{opacity:.55;cursor:default;border-color:var(--line);background:var(--bg)}
.ent-case.deja input{cursor:default}
.ent-sel{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.ent-pas{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--brand);
  border-radius:999px;background:var(--brand-w);color:var(--brand-x);font-family:inherit;font-size:12px;
  font-weight:650;cursor:pointer}
.ent-pas i{font-size:10.5px;opacity:.7}
.ent-pas:hover i,.ent-pas:focus-visible i{opacity:1}
#entModale .mdl-f{flex-wrap:wrap}
.ent-aide{flex:1 1 180px}
.ent-btns{display:flex;gap:9px;margin-left:auto}

/* Pastilles de l'en-tete d'operation : le nom de la notion (Statut, Phase) en plus
   leger que sa valeur, pour ne plus confondre « En cours » et « Chantier en cours ». */
.pill .pill-l{font-weight:550;opacity:.78}

/* ------------------------------------------------------------------ */
/* Recherche au repertoire officiel des entreprises                    */
/* ------------------------------------------------------------------ */
.rep-t{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}
.rep-t > i{color:var(--brand-x);font-size:16px;margin-top:2px}
.rep-t b{display:block;font-size:13.5px;font-weight:700}
.rep-t span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:2px}
.rep-etat{color:var(--muted);font-size:12px;white-space:nowrap}
.rep-res{display:flex;flex-direction:column;gap:5px;margin-top:10px;max-height:320px;overflow:auto}
.rep-l{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-family:inherit;font-size:13.5px;color:var(--fg)}
.rep-l:hover{border-color:var(--brand);background:var(--brand-w)}
.rep-l .n{flex:1;font-weight:650}
.rep-l .a{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.rep-l .c{font-size:11px;font-weight:700;color:#a8271f;text-transform:uppercase;letter-spacing:.04em}
.rep-l.cessee{background:var(--bg)}

/* Comparaison fiche / repertoire. */
.rep-cmp{width:100%;border-collapse:collapse;font-size:13px}
.rep-cmp th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding:0 8px 6px 0}
.rep-cmp td{padding:6px 8px 6px 0;border-top:1px solid var(--line);vertical-align:top}
.rep-cmp td.l{color:var(--muted);white-space:nowrap}
.rep-cmp tr.diff td{background:var(--warn-w)}
.rep-cmp tr.diff td.r{font-weight:650}
.rep-v{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rep-v > div{flex:1 1 100%}

/* =========================================================
   Visionneuse de plans (fiche d'un lot)
   Plein ecran, fond sombre : la feuille blanche du plan s'en
   detache, comme sur une table lumineuse. Le fond ne suit pas
   le theme : c'est le cadre du plan, pas une surface de l'app.
   ========================================================= */
.vis-vignette{padding:0;border:0;background:none;cursor:zoom-in;line-height:0;border-radius:6px}
.vis-vignette:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
dialog.vis{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:#161a20;color:#e8ecf2;
  display:none;flex-direction:column;overflow:hidden}
dialog.vis:focus{outline:none}
html:has(dialog.vis[open]){overflow:hidden}
dialog.vis[open]{display:flex}
dialog.vis::backdrop{background:rgba(10,12,16,.85)}
.vis-barre{display:flex;align-items:center;gap:12px;background:#1f242c;
  padding:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px))
          10px calc(14px + env(safe-area-inset-left,0px));
  border-bottom:1px solid #2c333d;flex:0 0 auto;min-height:56px}
.vis-titre{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.vis-titre b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-titre span{font-size:12px;color:#9aa5b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-position{font-size:12px;color:#9aa5b4;font-variant-numeric:tabular-nums;white-space:nowrap}
.vis-outils{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.vis-outils button,.vis-lien,.vis-reperes{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;min-width:36px;padding:0 10px;border-radius:9px;border:1px solid #343c48;background:#262c35;
  color:#e8ecf2;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.vis-outils button:hover,.vis-lien:hover,.vis-reperes:hover{border-color:#5b6778;background:#2d3440;text-decoration:none}
.vis-outils button:focus-visible,.vis-lien:focus-visible,.vis-reperes:focus-within{outline:2px solid #7fb3ff;outline-offset:1px}
.vis-lien[hidden]{display:none}
.vis-zoom{min-width:52px;text-align:center;font-size:12.5px;color:#c3cbd6;font-variant-numeric:tabular-nums}
.vis-reperes input{margin:0;accent-color:#d0342c}
.vis-reperes b{font-size:11.5px;padding:1px 7px;border-radius:10px;background:#3a424e;font-variant-numeric:tabular-nums}
dialog.vis.sans-reperes .vis-reperes{opacity:.55}
.vis-principal{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.vis-principal:hover{background:var(--brand-d);border-color:var(--brand-d)}
.vis-fermer{margin-left:4px}
.vis-scene{position:relative;flex:1 1 auto;overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(ellipse at center,#1d222a 0%,#12151a 75%)}
dialog.vis.zoome .vis-scene:active{cursor:grabbing}
.vis-toile{position:absolute;left:0;top:0;transform-origin:0 0}
.vis-toile img.vis-hd{position:absolute;left:0;top:0;pointer-events:none}
.vis-toile img.vis-hd[hidden]{display:none}
.vis-toile img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;
  background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.55)}
.vis-pins{position:absolute;inset:0;--iz:1}
.vis-pins[hidden]{display:none}
.vis-pin{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#6b7789;
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;text-decoration:none;
  transform:translate(-50%,-50%) scale(var(--iz));transform-origin:50% 50%;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.vis-pin:hover{text-decoration:none;filter:brightness(1.12)}
.vis-pin.x3{font-size:10px}
.vis-pin.s-ouverte{background:#d0342c}
.vis-pin.s-levee{background:#0f6f45}
.vis-pin.s-refusee{background:#6b7789}
.vis-pin.retard{border-color:#ffce4d}
.vis-charge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#9aa5b4;font-size:13.5px;pointer-events:none}
.vis-charge[hidden]{display:none}
.vis-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:12px;
  border:1px solid #343c48;background:rgba(31,36,44,.82);color:#e8ecf2;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.vis-nav:hover{background:rgba(45,52,64,.95)}
.vis-nav:focus-visible{outline:2px solid #7fb3ff;outline-offset:1px}
.vis-prec{left:calc(12px + env(safe-area-inset-left,0px))}
.vis-suiv{right:calc(12px + env(safe-area-inset-right,0px))}
dialog.vis.seul .vis-nav,dialog.vis.seul .vis-bande,dialog.vis.seul .vis-position{display:none}
.vis-aide{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:5px 12px;
  border-radius:20px;background:rgba(31,36,44,.8);color:#9aa5b4;font-size:11.5px;white-space:nowrap;
  pointer-events:none;transition:opacity .3s}
dialog.vis.zoome .vis-aide,dialog.vis.aide-vue .vis-aide{opacity:0}
.vis-bande{display:flex;gap:8px;background:#1f242c;border-top:1px solid #2c333d;
  padding:10px calc(14px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px))
          calc(14px + env(safe-area-inset-left,0px));
  overflow-x:auto;flex:0 0 auto;scrollbar-width:thin}
.vis-bande button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:112px;
  padding:6px;border-radius:10px;border:1px solid #2f3641;background:#262c35;color:#c3cbd6;cursor:pointer;font:inherit}
.vis-bande button:hover{border-color:#5b6778}
.vis-bande button.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(var(--brand-rgb),.45);color:#fff}
.vis-bande button:focus-visible{outline:2px solid #7fb3ff;outline-offset:1px}
.vis-bande img{width:100px;height:62px;object-fit:cover;border-radius:6px;background:#fff}
.vis-bande span{font-size:11px;line-height:1.25;text-align:center;max-width:100px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:760px){
  .vis-barre{flex-wrap:wrap;gap:8px;
    padding:calc(8px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px))
            8px calc(10px + env(safe-area-inset-left,0px))}
  .vis-titre{flex-basis:calc(100% - 110px)}
  .vis-outils{width:100%;justify-content:space-between;gap:4px}
  .vis-lib,.vis-zoom{display:none}
  .vis-outils button,.vis-lien,.vis-reperes{height:40px;padding:0 9px}
  .vis-nav{width:38px;height:52px;font-size:16px}
  .vis-prec{left:calc(6px + env(safe-area-inset-left,0px))}
  .vis-suiv{right:calc(6px + env(safe-area-inset-right,0px))}
  .vis-aide{display:none}
  .vis-bande button{width:84px}
  .vis-bande img{width:72px;height:46px}
}
/* Telephone en paysage : peu de hauteur, elle revient au plan. La barre tient sur
   une ligne sans le detail du plan, et la bande ne garde que ses vignettes. */
@media(max-height:500px){
  .vis-barre{flex-wrap:nowrap;min-height:0;padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:4px}
  .vis-titre{flex-basis:auto}
  .vis-titre span,.vis-position,.vis-lib,.vis-zoom,.vis-aide{display:none}
  .vis-outils{width:auto}
  .vis-outils button,.vis-lien,.vis-reperes{height:34px;min-width:34px;padding:0 8px}
  .vis-bande{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  .vis-bande button{width:auto;padding:3px}
  .vis-bande span{display:none}
  .vis-bande img{width:56px;height:36px}
}
@media(prefers-reduced-motion:reduce){.vis-aide{transition:none}}

/* ---------- Annuaire : entreprises, ingenieries, fournisseurs ---------- */
/* .field label met les libelles en bloc : dans le formulaire de l'annuaire, les
   cases (categorie, pieces fournies) retrouvent l'alignement de .check. */
.ann-form .field label.check{display:inline-flex}

/* ---------- Onglet Entreprises : piece DOC, fournisseurs et ingenieries ---------- */
/* Bloc ajoute pour le retour du 01/10 (date de la DOC, validation groupee de la
   piece DOC, intervenants du chantier). Rien d'autre ne s'en sert. */
.doc-zone{border-top:1px solid var(--line)}
.doc-date{display:flex;align-items:flex-start;gap:11px}
.doc-date > i{color:var(--brand);font-size:16px;margin-top:2px}
.doc-date-l{font-weight:700;font-size:13.5px;margin-right:6px}
.doc-date-v{margin-top:3px;font-size:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.doc-expl{margin:10px 0 0;line-height:1.5;max-width:760px}
.doc-valider{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 0}
.doc-tout{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer}
.doc-tout input{width:17px;height:17px;margin:0;accent-color:var(--brand-x);cursor:pointer}
/* Sur chaque ligne : la case, le libelle DOC, l'avis de l'annuaire. */
.doc-aide{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:4px 7px;border-radius:7px;
  font-size:12px;line-height:1.4;color:var(--ink-2);background:var(--bg)}
.doc-aide .mt-lbl{margin-top:1px;flex:none}
.doc-aide > span:last-child{min-width:0}
.doc-aide > i{font-size:11.5px;margin-top:2px;flex:none}
.doc-aide.ok > i{color:#15723c}
.doc-aide.warn > i{color:#b7791f}
.doc-aide.late > i{color:#a8271f}
.doc-aide.info{background:var(--info-w)}
.doc-aide.info > i{color:var(--info)}
/* Valider la DOC avec tolerance : un motif, la date de l'attestation retenue. */
.doc-tol{margin-top:5px}
.doc-tol > summary{cursor:pointer;font-size:11.5px;font-weight:600;color:#08417f;list-style:none}
.doc-tol > summary::-webkit-details-marker{display:none}
.doc-tol > summary::before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;margin-right:5px}
.doc-tol-f{display:grid;grid-template-columns:140px auto;justify-content:start;gap:6px;align-items:center;margin-top:5px}
.doc-tol-f input{padding:5px 8px;font-size:12.5px}
.doc-tol-f input[type=text]{grid-column:1 / -1;width:100%}
.btn.info{background:var(--info);border-color:var(--info);color:#fff}
.btn.info:hover{background:#0a55b0;border-color:#0a55b0;color:#fff}
@media (max-width:700px){ .doc-tol-f{grid-template-columns:1fr 1fr} }
label.doc-aide{cursor:pointer}
.doc-aide input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--brand-x);cursor:pointer}
label.doc-aide:has(input:checked){background:var(--brand-w);box-shadow:inset 0 0 0 1px var(--brand)}
/* Barre de validation DOC : collee au bas de l'ecran pendant qu'on coche, tant que
   les entreprises defilent, puis a sa place sous la derniere. Elle laisse le coin bas
   droit au bouton flottant d'ajout rapide (116 px au plus sur ordinateur, 54 px en
   rond sur tablette et telephone) et s'aligne sur son bas. */
.doc-barre{position:sticky;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;
  width:max-content;max-width:100%;margin:14px 0 0 auto;padding:7px 8px 7px 16px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:30px;box-shadow:var(--sh-2)}
.doc-barre-n{font-size:12.5px;font-weight:650;color:var(--ink-2)}
body.a-fab .doc-barre{max-width:calc(100% - 130px);margin-right:130px}
@media(max-width:880px){
  .doc-barre{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  body.a-fab .doc-barre{max-width:calc(100% - 65px);margin-right:65px}
}
/* Fournisseurs et ingenieries : un tableau, les colonnes alignees sur celles du
   dessus autant que possible. */
.tbl-oi{table-layout:fixed;width:100%}
.tbl-oi .c-oi-nom{width:28%}
.tbl-oi .c-oi-des{width:34%}
.tbl-oi .c-oi-contact{width:26%}
.tbl-oi .c-oi-act{width:12%}
.tbl-oi td,.tbl-oi th{overflow-wrap:anywhere}
.oi-role{font-size:11px;font-weight:650;color:var(--muted);margin-top:2px}
.oi-role i{font-size:10.5px;margin-right:2px}
.oi-des{display:flex;align-items:center;gap:6px;margin:0}
.oi-des input{flex:1;min-width:0;padding:5px 8px;font-size:12.5px}
.oi-mdl-des{display:block;font-weight:500;font-size:12px;color:var(--muted)}
#oiModale .mdl-f{flex-wrap:wrap}
#oiModale .mdl-grp-t i{margin-right:4px}
/* Fenetre des fournisseurs et ingenieries (retour de Laurent du 16/10/2026) : deux
   sections, Ingenieries par mission puis Fournisseurs par corps, comme l'annuaire. */
.oi-sec{display:flex;flex-direction:column;gap:10px}
/* Le filet ne separe que deux sections visibles : la recherche peut masquer la premiere. */
.oi-sec:not([hidden]) ~ .oi-sec{padding-top:12px;border-top:1px solid var(--line)}
.oi-sec-t{margin:0;font-size:13px;font-weight:700;color:var(--fg)}
.oi-sec-t i{color:var(--brand-x);margin-right:5px;font-size:12px}
/* Corps fournis par un fournisseur sur le chantier : pastilles, et cases pour en changer. */
.oi-corps{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.oi-corps-ch{margin-top:6px;font-size:12.5px}
.oi-corps-ch summary{cursor:pointer;color:var(--brand-x);font-weight:650}
.oi-corps-ch form{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:6px 0 0}
.oi-corps-ch label.check{display:flex;align-items:center;gap:6px;margin:0;padding:4px 9px;font-size:12.5px;
  font-weight:500;max-width:100%}
.oi-corps-ch label.check i{width:14px;text-align:center;flex:none}
.oi-corps-ch .btn{margin-top:4px}
/* Tablette : les deux boutons d'action debordaient de 3 px de leur colonne et
   faisaient defiler chaque tableau. */
@media(max-width:1100px){
  .tbl-ent td.act,.tbl-oi td.act{padding-left:6px;padding-right:10px}
}
/* Telephone : la colonne Contact se cache (.hide-sm), mais sa <col> gardait sa
   largeur et chaque cellule suivante glissait d'un cran. Les marches et pieces
   tombaient dans les 16 % du contact, une lettre par ligne. On cache aussi la
   <col>, et les boutons d'action passent l'un sous l'autre. */
@media(max-width:640px){
  .tbl-ent col.c-contact,.tbl-oi col.c-oi-contact{display:none}
  .tbl-ent .c-ent{width:25%}
  .tbl-ent .c-docs{width:45%}
  .tbl-ent .c-res{width:18%}
  .tbl-ent .c-act{width:12%}
  .tbl-ent td.nowrap{white-space:normal;overflow-wrap:normal;padding-left:4px;padding-right:4px}
  .tbl-ent td.nowrap .pill{display:inline-block;border-radius:9px;padding:3px 7px;line-height:1.3}
  .tbl-oi .c-oi-nom{width:42%}
  .tbl-oi .c-oi-des{width:44%}
  .tbl-oi .c-oi-act{width:14%}
  /* Les en-tetes passent a la ligne entre les mots : « Désignation sur ce chantier »
     depassait sa colonne sous 375 px et le tableau defilait, en-tete coupe ; sous
     330 px, « Marchés et documents du chantier » faisait de meme. */
  table.tbl.tbl-oi th,table.tbl.tbl-ent th{white-space:normal;overflow-wrap:normal}
  .tbl-ent td.act,.tbl-oi td.act{white-space:normal;padding-left:4px;padding-right:8px}
  .tbl-ent td.act .btn-ico,.tbl-ent td.act form,
  .tbl-oi td.act .btn-ico,.tbl-oi td.act form{display:flex !important;margin:0 0 6px auto}
  /* Avis DOC : a cote de la case, du libelle et de l'icone, le texte n'avait que
     56 px, un ou deux mots par ligne et les dates coupees en deux (« 26/08/202 / 6 »).
     Il passe dessous, sur toute la largeur de l'avis, et ne coupe plus un mot. */
  .doc-aide{flex-wrap:wrap;row-gap:3px}
  .doc-aide > span:last-child{flex:1 1 100%;overflow-wrap:normal}
  /* La barre DOC prend la largeur laissee par le bouton flottant : le compteur
     au-dessus, le bouton dessous sur toute la largeur s'il ne tient pas a cote. */
  .doc-barre{width:auto;margin-left:0;justify-content:flex-start;border-radius:16px;padding:8px 8px 8px 13px}
  .doc-barre-n{flex:1 1 auto}
  .doc-barre .btn{flex:1 0 auto}
}

/* ---------- NC et reserves : pastille de categorie et bascules ----------
   Une NC (phase chantier) et une reserve (pre-livraison, livraison, SAV) vivent
   dans la meme table. La pastille dit laquelle ; sa forme carree et bordee ne se
   confond pas avec la pastille ronde du statut. Les bascules retirent ou
   ajoutent une categorie aux ecrans qui montrent les deux (decision du 01/10). */
.cat-el{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10.5px;font-weight:750;
  letter-spacing:.2px;line-height:1.5;vertical-align:1px;border:1px solid;white-space:nowrap;
  font-variant-numeric:normal}
.cat-el.nc{color:#7a3d00;background:#fff3e6;border-color:#f0c79a}
.cat-el.res{color:#3b2f8f;background:#f0eefc;border-color:#cbc4f2}
.filtres-cat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.filtres-cat .chips{margin-bottom:0}
.bascules{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.bascules-l{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-right:2px}
.bascules a,.bascules span.on{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:4px 12px;
  border-radius:9px;font-size:12.5px;font-weight:650;border:1px solid var(--line-2);background:var(--surface);
  color:var(--muted)}
.bascules a:hover{border-color:var(--brand-x);color:var(--ink);text-decoration:none}
.bascules i{font-size:17px}
.bascules b{font-weight:700;font-size:11.5px;color:var(--muted)}
.bascules a.on,.bascules span.on{color:var(--ink);border-color:var(--brand-x);background:var(--brand-w)}
.bascules .on i{color:var(--brand-x)}
.bascules .seul{cursor:default}
.card-h .bascules a,.card-h .bascules span.on{min-height:30px;padding:3px 10px}
/* Barre d'une repartition (tableau de bord) : le nom, et dessous ce qu'elle compte. */
.bar-line .lbl .deux{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.bar-line .lbl .deux small{font-size:11px;color:var(--muted);font-weight:500;white-space:normal}
/* Telephone : la pastille passe au-dessus du numero, la colonne garde sa largeur. */
@media(max-width:640px){
  table.tbl td.cat-num{white-space:normal;padding-left:8px;padding-right:6px}
  table.tbl td.cat-num .cat-el{display:block;width:max-content;margin-bottom:2px}
  table.tbl th.cat-num{width:auto !important}
}

/* ---------- Annuaire : colonnes alignees d'un groupe et d'un onglet a l'autre ----------
   Chaque corps d'etat (ou mission) forme son propre tableau : avec les largeurs
   calculees par tableau, nom, contact et telephone ne tombaient pas au meme endroit
   d'un groupe a l'autre (retour de Laurent du 06/10). Les largeurs sont imposees, les
   memes pour les trois onglets ; la quatrieme colonne (dossier administratif, lots
   fournis, vide pour une ingenierie) prend le reste. Un nom de contact ou un numero
   trop long est coupe par des points de suspension, le survol le montre entier ; la
   raison sociale passe a la ligne, l'e-mail aussi, apres l'arobase de preference. */
.tbl-annu{table-layout:fixed;width:100%}
.tbl-annu .c-nom{width:25%}
.tbl-annu .c-contact{width:27%}
.tbl-annu .c-tel{width:136px}
.tbl-annu .c-act{width:96px}
table.tbl.tbl-annu th{white-space:normal}
.tbl-annu td{overflow-wrap:break-word}
.tbl-annu .annu-cut{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tbl-annu .annu-mail{display:block;overflow-wrap:anywhere}
.tbl-annu .annu-nb{margin-left:6px}
/* Tablette et petit portable : le nom et le contact cedent un peu de place au dossier
   administratif, et la pastille passe a la ligne sans deborder si elle ne tient pas. */
@media(max-width:1100px){
  .tbl-annu .c-nom{width:23%}
  .tbl-annu .c-contact{width:25%}
  .tbl-annu .c-tel{width:124px}
  .tbl-annu .c-act{width:88px}
  .tbl-annu td.act{padding-left:6px;padding-right:10px}
  .tbl-annu .pill{border-radius:9px;line-height:1.3;padding:3px 8px}
}
/* Telephone : contact et telephone se cachent (.hide-sm) et passent sous le nom ; leurs
   <col> se cachent aussi, sans quoi les cellules suivantes glisseraient d'un cran. La
   colonne vide des ingenieries disparait, les deux boutons passent l'un sous l'autre :
   chaque tableau tient dans l'ecran sans defiler. */
@media(max-width:640px){
  .tbl-annu col.c-contact,.tbl-annu col.c-tel,.tbl-annu .vide{display:none}
  .tbl-annu .c-nom{width:auto}
  .tbl-annu .c-plus{width:42%}
  .tbl-annu .c-act{width:48px}
  .tbl-annu td.act{white-space:normal;padding-left:4px;padding-right:8px}
  .tbl-annu td.act .btn-ico{display:flex;margin:0 0 6px auto}
  .tbl-annu td.act .btn-ico:last-child{margin-bottom:0}
  /* Ingenieries : sans quatrieme colonne, la place ne manque pas, les boutons
     restent cote a cote. */
  .tbl-annu.annu-sans-plus .c-act{width:84px}
  .tbl-annu.annu-sans-plus td.act{white-space:nowrap}
  .tbl-annu.annu-sans-plus td.act .btn-ico{display:inline-flex;margin:0}
}

/* ---------- Annuaire : presentation « Pièces » et pieces non necessaires (retour du 05/11/2026) ----------
   Un seul tableau, une case par piece, avec les pastilles du suivi des chantiers (.mp). Les
   largeurs sont imposees : le tableau tient sans defiler a 1366 px, menu ouvert ; plus etroit,
   il defile de cote (.tbl-wrap) et la colonne Entreprise reste visible (collante, fond plein).
   Une piece expiree ou absente est rouge (.mp.late), une piece non necessaire grise et barree,
   y compris dans un lien survole (a.mp,a.mp:hover retire le soulignement plus bas). */
.mp.late{background:var(--late-w);border-color:#f0c4c1;color:#a8271f}
.pill.so{background:#eef0f4;color:#8b95a4;text-decoration:line-through}
.dot.so{background:transparent;box-shadow:inset 0 0 0 1px #b8c2cf}
.annu-legende{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.annu-legende .mp{pointer-events:none;height:20px;font-size:10.5px}
.annu-legende > span:last-child{margin-left:4px;line-height:1.4}
.tbl-pieces{table-layout:fixed;min-width:1060px}
/* Bordures separees : en bordures fusionnees, la cellule collante perd ses traits en defilant.
   Le trait entre deux lignes est en haut de la ligne du dessous, peinte apres : la cellule
   collante d'une ligne ne recouvre pas celui de la ligne d'au-dessus. */
table.tbl.tbl-pieces{border-collapse:separate;border-spacing:0}
table.tbl.tbl-pieces td{border-bottom:0;border-top:1px solid var(--line)}
.tbl-pieces .c-cm{width:96px}
.tbl-pieces .c-nom{width:160px}
.tbl-pieces .c-ct{width:136px}
.tbl-pieces .c-p{width:66px}
.tbl-pieces .c-ref{width:112px}
.tbl-pieces .c-rel{width:82px}
.tbl-pieces .c-act{width:44px}
table.tbl.tbl-pieces th{white-space:normal;padding:8px 6px;line-height:1.25}
table.tbl.tbl-pieces th.c-p{text-align:center}
table.tbl.tbl-pieces td{padding:6px;font-size:13px;overflow-wrap:break-word;line-height:1.35}
.tbl-pieces td.c-p .mp{width:100%;min-width:0;padding:0 3px}
.tbl-pieces .mp-row{gap:3px;flex-wrap:nowrap}
.tbl-pieces .mt-f{display:inline-flex;margin:0}
.tbl-pieces .mp.mini{min-width:30px;height:21px;padding:0 4px;font-size:10.5px}
.tbl-pieces a.mp.none,.tbl-pieces a.mp.none:hover{text-decoration:line-through}
/* Corps de metier : sa couleur en lisere, son nom en clair sur la premiere ligne du corps, et
   un trait plus marque au changement de corps, comme le tableur. */
table.tbl.tbl-pieces tbody tr.cm-deb td{border-top:2px solid var(--line-2)}
table.tbl.tbl-pieces tbody tr:first-child td{border-top:0}
table.tbl.tbl-pieces td.c-cm{box-shadow:inset 3px 0 0 var(--c);padding-left:10px;font-size:11.5px;color:var(--muted);line-height:1.3}
.tbl-pieces td.c-cm i{color:var(--c);margin-right:5px}
.tbl-pieces tr.cm-deb td.c-cm{color:var(--ink-2);font-weight:650}
.tbl-pieces .c-nom{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
table.tbl.tbl-pieces th.c-nom{background:#fafbfd}
.tbl-pieces tbody tr:hover td.c-nom{background:#f8fafd}
.tbl-pieces td.c-nom .dot{margin-right:3px;vertical-align:1px}
.tbl-pieces .annu-cut{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tbl-pieces .annu-com{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.tbl-pieces .annu-com.ouvert{display:block}
.tbl-pieces .annu-rel-cours{color:#8f5d10;font-weight:650}
/* Telephone : le corps se reduit a son icone ; le reste defile de cote, l'entreprise reste. */
@media(max-width:640px){
  .tbl-pieces{min-width:960px}
  .tbl-pieces .c-cm{width:34px}
  table.tbl.tbl-pieces td.c-cm{padding-left:9px;padding-right:2px}
  .tbl-pieces .c-nom{width:128px}
}
/* Formulaire : le lien d'une case du tableau ouvre le dossier administratif sous la barre du haut. */
.ann-form #dossier{scroll-margin-top:70px}
/* Fiche : bouton « Non nécessaire » ou « Rétablir » d'une piece facultative. */
.doc-line .doc-so{margin:0}
.doc-line .doc-so .btn{padding:3px 9px;font-size:11.5px;border-radius:7px}
.doc-line .nm.so{text-decoration:line-through;color:var(--muted)}

/* ---------- Satisfaction du client : carte du logement et synthese (enquetes) ---------- */
.enq-res{display:flex;align-items:center;gap:14px}
.enq-note{flex:none;width:58px;height:58px;border-radius:50%;color:#fff;display:flex;align-items:baseline;justify-content:center;
  padding-top:14px;font-weight:800;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.enq-note b{font-size:24px;line-height:1}
.enq-note span{font-size:11px;margin-left:1px;opacity:.9}
.enq-appr{font-weight:800;font-size:16px;margin-bottom:2px}
.enq-mot{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--brand-w);color:var(--ink-2);font-size:13.5px;line-height:1.5}
.enq-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.enq-act form{margin:0}
.enq-kpi .val small{font-size:13px;color:var(--muted);font-weight:600}
.enq-barres{display:grid;gap:10px}
.enq-ligne{display:grid;grid-template-columns:170px 1fr 92px;align-items:center;gap:12px}
.enq-ligne.gen{border-top:1px solid var(--line);padding-top:10px}
.enq-ligne.gen .enq-q{font-weight:800}
.enq-q{font-size:13.5px;font-weight:600}
.enq-piste{height:12px;border-radius:99px;background:#eef1f5;overflow:hidden}
.enq-piste i{display:block;height:100%;border-radius:99px}
.enq-v{text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.enq-v b{font-size:15px}
.enq-v small{display:block;font-size:11px;color:var(--muted)}
.enq-pt{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;margin-right:6px}
.enq-extrait{margin-top:3px;max-width:340px}
.enq-lancer{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,380px);align-items:center;gap:14px 16px}
.enq-lancer-t{display:flex;align-items:center;gap:12px;min-width:0}
.enq-lancer-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-w);color:var(--brand-x)}
.enq-lancer select{width:100%;min-width:0}
.enq-lancer .enq-modes{grid-column:1 / -1}
/* Les trois facons de faire repondre le client : sur cet appareil, par e-mail, par QR code */
.enq-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.enq-mode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:86px;padding:12px 6px 10px;
  border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);font-family:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s}
.enq-mode i{font-size:21px;color:var(--brand-x);margin-bottom:5px}
.enq-mode b{font-size:14px;font-weight:750}
.enq-mode small{font-size:11.5px;color:var(--muted);line-height:1.25;text-align:center}
.enq-mode:hover:not(:disabled){border-color:var(--brand);background:var(--brand-w)}
.enq-mode:active:not(:disabled){transform:scale(.97)}
.enq-mode:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.enq-mode.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.enq-mode.on i,.enq-mode.on small{color:inherit;opacity:.92}
.enq-mode.on:hover:not(:disabled){background:var(--brand-d);border-color:var(--brand-d)}
.enq-mode:disabled{opacity:.45;cursor:not-allowed}
.enq-mdl{max-width:min(520px,calc(100vw - 28px))}
@media(max-width:640px){
  .enq-ligne{grid-template-columns:1fr 64px;row-gap:4px}
  .enq-lancer{grid-template-columns:1fr}
  .enq-q{grid-column:1 / -1}
}
/* CR : transmission au secretariat a la generation du PDF (retour du 08/10) */
.cr-prevenir{display:flex;gap:9px;align-items:flex-start;margin:16px 0 6px;font-size:13.5px;line-height:1.45}
/* Onglet Entreprises en livraison et SAV : PV de reception et quitus en liens (retour du 08/10) */
a.mp,a.mp:hover{text-decoration:none}
a.mp.add{gap:2px;font-size:10.5px}
/* PV de livraison : acquereurs ou maitre d'ouvrage a la place de l'entreprise (retour du 08/10) */
.pv-client{min-height:38px;display:flex;align-items:center;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);font-weight:650;font-size:14px}
.pv-decision{display:flex;flex-direction:column;gap:6px}
.pv-choix{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13.5px}
.pv-choix:has(input:checked){border-color:var(--brand);background:var(--brand-w)}
.pv-choix input{margin-top:2px;accent-color:var(--brand)}
.pv-decision .btn{align-self:flex-start;margin-top:4px}
/* Fiche d'intervention / quitus (retour du 08/10) */
.fi-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fi-photo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fi-photo img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
/* Editeur des CR types (retour du 08/10) */
.crt-sec{margin-bottom:12px}
.crt-sh{gap:8px;flex-wrap:wrap}
.crt-num{font-weight:800;color:var(--muted);min-width:22px}
.crt-titre{flex:1 1 220px;font-weight:700}
.crt-corps{flex:0 1 220px;max-width:260px}
.crt-outils{display:inline-flex;gap:4px;margin-left:auto}
.crt-blocs{display:grid;gap:10px;margin-bottom:10px}
.crt-bloc{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.crt-bh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.crt-type{max-width:150px}
.crt-bh input[type=text]{flex:1 1 200px}
.crt-bloc textarea{width:100%;font-size:13px;line-height:1.45}
.crt-plus{margin-top:6px;font-size:12.5px;color:var(--muted)}
.crt-plus summary{cursor:pointer}
.crt-plus select{margin-top:6px}
.crt-barre{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%);margin-top:12px;z-index:3}
/* PV de livraison : enregistrement automatique et signataire 2L (correctif du 10/10) */
.pv-etat.ok-txt{color:#15723c;font-weight:600}
.pv-etat.ko-txt{color:#a8271f;font-weight:600}
.pv-signataire{padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--radius-s);background:var(--bg)}
.pv-signataire select{min-width:220px}
.pv-signataire .pv-sig-nom{flex:1 1 180px}
/* Operation : filtre de la liste des maitres d'ouvrage (retour du 10/10) */
.op-moa-rech{margin-bottom:6px}
/* Import des plans depuis Dropbox (retour du 10/10) */
.dbx-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dbx-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-w);color:var(--brand-x)}
.dbx-chemin{overflow-wrap:anywhere}
.dbx-tbl td{vertical-align:middle}
.dbx-tbl .dbx-nom{overflow-wrap:anywhere;font-size:13px}
.dbx-tbl .dbx-lib{min-width:180px}
.dbx-barre{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%);z-index:3}
/* Choix du dossier Dropbox d'un chantier (retour du 10/10) */
.dbx-fil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px;padding:8px 10px;background:var(--bg);border-radius:var(--radius-s)}
.dbx-fil span{color:var(--muted)}
.dbx-dossiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.dbx-dossier{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;background:var(--surface)}
.dbx-dossier:hover{border-color:var(--brand);background:var(--brand-w);text-decoration:none}
.dbx-dossier > .fa-folder{color:#0061fe}
.dbx-dossier span{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:13.5px}
.dbx-dossier > .fa-chevron-right{color:var(--muted);font-size:11px}
/* Contenu du dossier Dropbox du chantier, import et choix des plans d'un logement (12/10/2026) */
.dbx-contenu td{vertical-align:middle}
.dbx-contenu .dbx-nom{overflow-wrap:anywhere;font-weight:600;font-size:13.5px}
.dbx-fic{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:7px;background:var(--bg);color:var(--muted);vertical-align:middle}
.dbx-fic.pdf{color:#c2410c}
.dbx-fic.img{color:#0f766e}
.dbx-fic.cad{color:#4338ca}
.dbx-fic.xls{color:#15803d}
.dbx-fic.doc{color:#1d4ed8}
.dbx-archive{opacity:.82}
.dbx-tbl .dbx-mode{max-width:280px}
.dbx-tbl .dbx-cmlib{margin-top:3px}
.lp-modes{display:grid;gap:8px}
.lp-mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface)}
.lp-mode:has(input:checked){border-color:var(--brand);background:var(--brand-w)}
.lp-mode input{margin-top:3px}
.lp-groupe{border-top:1px solid var(--line)}
.lp-groupe:first-child{border-top:0}
.lp-groupe-t{display:flex;align-items:center;gap:10px;padding:10px 16px;font-weight:700;font-size:13.5px;background:var(--bg)}
.lp-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;padding:10px 16px 14px}
.lp-plan{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface)}
.lp-plan:has(input:checked){border-color:var(--brand);background:var(--brand-w)}
.lp-plan img{width:56px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none;background:var(--bg)}
.lp-plan .nm{flex:1;min-width:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.lp-plan.verrou{cursor:default}
.lp-propose{outline:2px dashed var(--brand);outline-offset:1px}
.lp-lots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.lp-lot{display:flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px;cursor:pointer}
.lp-lot:has(input:checked){border-color:var(--brand);background:var(--brand-w)}
.dbx-tbl td:nth-child(2){min-width:150px}
.dbx-tbl .dbx-de{margin-top:4px;overflow-wrap:anywhere}
.dbx-tbl .dbx-herite{font-size:13px}
.dbx-synchro{margin:10px 0 0;line-height:1.55}
/* Chemin du dossier Dropbox en entier sous le champ, le dossier enregistre en evidence. */
.dbx-chemin{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:7px 10px;font-size:13px;line-height:1.5;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);overflow-wrap:anywhere}
.dbx-chemin > i{color:var(--muted);margin-top:3px}
.dbx-sep{color:var(--muted);margin:0 4px}
.dbx-dernier{font-weight:700;color:var(--brand-x);background:var(--brand-w);padding:1px 6px;border-radius:5px}
.dbx-lus{margin-top:6px}
.dbx-echecs{margin-top:8px;color:var(--ink-2)}.dbx-echecs div{margin-top:3px}

/* Barre de selection des reserves (envoi aux entreprises, actions groupees) : elle flotte
   en bas de l'ecran, par-dessus la liste, au lieu d'apparaitre dans la page et de pousser
   la liste vers le bas a la premiere case cochee (retour de Laurent du 05/11/2026). Elle
   laisse le coin bas droit au bouton flottant d'ajout rapide. */
#barre-groupe{position:fixed !important;top:auto !important;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  left:calc(var(--side-w) + 20px);right:20px;z-index:45;margin:0 !important;padding:10px 14px !important;
  background:var(--surface);border:1px solid var(--line-2) !important;border-radius:14px !important;box-shadow:var(--sh-2) !important}
body.rail #barre-groupe{left:calc(var(--rail) + 20px)}
body.a-fab #barre-groupe{right:150px}
body:has(#barre-groupe:not([hidden])) .content{padding-bottom:120px}
/* Menu ouvert au telephone : la barre ne le recouvre pas. Le message d'une action passe
   au-dessus d'elle quand elle est affichee. */
body.nav-open #barre-groupe{display:none !important}
body:has(#barre-groupe:not([hidden])) .flash.flash-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media(max-width:880px){
  #barre-groupe,body.rail #barre-groupe{left:13px;right:13px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.a-fab #barre-groupe{right:76px}
  /* Au telephone, les boutons passent sur trois lignes : la barre est plus haute. */
  body:has(#barre-groupe:not([hidden])) .content{padding-bottom:220px}
  body:has(#barre-groupe:not([hidden])) .flash.flash-toast{bottom:calc(190px + env(safe-area-inset-bottom,0px))}
}

/* PV de reception entreprise : cases cochees a la redaction (retour de Laurent du 05/11/2026). */
.pr-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.pr-g{border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 12px 10px;margin:0;display:flex;flex-direction:column;gap:4px}
.pr-g legend{font-size:12px;font-weight:700;color:var(--ink-2);padding:0 4px}
.pr-raisons{display:flex;flex-direction:column;gap:3px;margin:2px 0 2px 24px}

/* =========================================================
   Marches de travaux : date d'envoi, formulaire sur deux rangees,
   PPSPS redige par 2L (demandes de Laurent et Charlotte du 05/11/2026)
   ========================================================= */
/* 1re rangee : rang, numero, etat, boutons ; 2e rangee : envoye le, signe le, note. La cellule
   n'a que 317 px utiles a 1024 px d'ecran (412 a 1180) : sept champs sur une rangee debordaient
   sur les colonnes Reserves et Actions. L'etat a 110 px comme les listes des pieces : a 100 px,
   Safari coupait « Sans objet ». */
.mt-form{display:grid;grid-template-columns:34px minmax(0,1fr) 110px 30px 30px;gap:6px 8px;
  align-items:center;margin-top:8px}
.mt-form .mp-l{font-size:12px;font-weight:700;color:var(--ink-2)}
.mt-form + .mt-form:not(.mt-add){padding-top:8px;border-top:1px solid var(--line)}
.mt-l2{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 8px;margin:0}
.mt-chp{display:flex;flex-direction:column;gap:2px;margin:0;flex:0 1 136px;min-width:0}
.mt-chp > span{font-size:11px;font-weight:600;line-height:1.2;color:var(--muted)}
.mt-chp-note{flex:1 1 120px}
@media(max-width:640px){
  /* Telephone : la cellule n'a que 143 px. Les boutons sur la rangee du MTn, puis un champ
     par ligne. Le dernier champ des pieces garde son bouton a cote de lui. */
  .mt-form{grid-template-columns:minmax(0,1fr) 30px 30px}
  .mt-form .mp-l{grid-column:1;grid-row:1}
  .mt-form .btn-ico{grid-row:1}
  .mt-form .mt-num,.mt-form select{grid-column:1 / -1}
  .mt-chp,.mt-chp-note{flex:1 1 100%}
  .mp-form input[type=text]{flex-basis:70px}
}
/* PPSPS que 2L redige pour l'entreprise, encore attendu : violet, distinct de l'orange
   (attendu de l'entreprise), du vert (reçu), du bleu (DOC avec tolerance) et du gris. */
.mp.a2l{background:#f3e8ff;border-color:#d8b4fe;color:#6b21a8}