:root{
  --ink:#13294b; --muted:#5b6b80; --line:#e0e6ee; --bg:#f2f5f9; --card:#fff;
  --accent:#1f7a74; --accent-2:#e2f3ef; --navy:#17325f; --warn:#b4531f; --warn-bg:#fdf1e8; --ok:#23845c;
  --degrade:linear-gradient(135deg,#1f5f8b 0%,#22807c 55%,#35a06a 100%);
  --ombre:0 1px 2px rgba(19,41,75,.05),0 6px 20px rgba(19,41,75,.06);
  --font: Inter, system-ui, -apple-system, sans-serif;
  --titres: Poppins, Inter, system-ui, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font)}
h1,h2{font-family:var(--titres);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:30px;margin:8px 0 4px} h2{font-size:21px;margin:28px 0 6px} h3{margin:0 0 4px;font-size:15px}
.hidden{display:none!important}
.top{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;padding:10px 24px;flex-wrap:wrap}
.brand{display:flex;gap:8px;align-items:center}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--accent);color:#fff}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.steps{display:flex;gap:4px;list-style:none;margin:0;padding:0;counter-reset:s;flex-wrap:wrap}
.steps li{counter-increment:s;padding:6px 12px;border-radius:99px;color:var(--muted);font-size:14px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);margin-right:6px;font-size:12px}
.steps li.on{background:var(--accent-2);color:var(--accent);font-weight:600}
.steps li.on::before{background:var(--accent);color:#fff;border-color:var(--accent)}
.steps li.done{color:var(--ink);cursor:pointer}
main{max-width:1180px;margin:0 auto;padding:24px 16px 80px}
.lead{color:var(--muted);margin:0 0 18px;max-width:720px}
.hint{color:var(--muted);font-size:13px;margin:6px 0}
.addr{position:relative;max-width:640px}
.addr input{width:100%;font:inherit;font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.addr input:focus{outline:none;border-color:var(--accent)}
.sugg{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0001;z-index:500}
.sugg:empty{display:none}
.sugg li{padding:8px 10px;border-radius:6px;cursor:pointer}
.sugg li:hover,.sugg li.sel{background:var(--accent-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;align-items:start}
.grid2.wide{grid-template-columns:1.6fr 1fr}
@media (max-width:860px){.grid2,.grid2.wide{grid-template-columns:1fr}}
.map{height:420px;border-radius:12px;border:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.fact{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact .k{color:var(--muted);font-size:13px}
.fact .v b{font-size:16px}
.badge{display:inline-block;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600}
.badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.ok{background:var(--accent-2);color:var(--ok)}
details summary{cursor:pointer;color:var(--accent);font-size:13px;margin-top:4px}
details ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--muted);columns:2}
.alert{background:var(--warn-bg);border-left:3px solid var(--warn);padding:10px 12px;border-radius:6px;font-size:14px;margin-top:12px}
.note{font-size:12px;color:var(--muted);margin-top:12px}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
button{font:inherit;padding:10px 18px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
button:hover{filter:brightness(.97)}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 14px;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form legend{font-weight:600;padding:0 6px}
.form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:4px}
.form input,.form select{font:inherit;color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.big{font-family:Fraunces,Georgia,serif;font-size:26px;margin:2px 0 6px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border:0}
.planbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
#planEdit{width:100%;height:560px;touch-action:none;display:block}
#planEdit .abri{cursor:grab}
.range{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.range input{flex:1}
#dists{margin-top:14px}
.thumb{width:100%;margin-top:10px;border-radius:8px}
.ins-stage{position:relative;overflow:hidden;border-radius:12px;background:#e9ece8;min-height:240px;max-width:860px;touch-action:none}
.ins-stage img{display:block;width:100%}
.ins-empty{display:grid;place-items:center;height:240px;color:var(--muted)}
.ins-sil{position:absolute;cursor:grab}
.pay{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:12px}
.pay em{color:var(--muted);font-style:normal;font-size:12px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.decl{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-bottom:16px}
@media (max-width:860px){.decl{grid-template-columns:1fr}}
.form .wide{grid-column:1/-1}
.form label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.form label.check input{width:auto}
#reste ul{margin:10px 0 0;padding-left:18px;font-size:14px}
#reste li.ok{color:var(--ok)} #reste li.todo{color:var(--warn)}

/* ---------- Dossier (pages A4 paysage) ---------- */
#dossier{padding:0 16px 60px;display:flex;flex-direction:column;align-items:center;gap:20px}
.page{width:297mm;height:210mm;background:#fff;box-shadow:0 2px 12px #0002;position:relative;padding:10mm 12mm 10mm;display:flex;flex-direction:column;overflow:hidden;font-size:11pt;color:#111}
.page h2{font-family:var(--font);font-size:15pt;margin:0 0 4mm;font-weight:700}
.page .body{flex:1;display:flex;gap:8mm;min-height:0}
.cartouche{display:grid;grid-template-columns:auto 1fr auto auto;border:1px solid #111;font-size:8.5pt;margin-top:4mm}
.cartouche div{padding:1.5mm 3mm;border-right:1px solid #111}
.cartouche div:last-child{border-right:0}
.cartouche .code{font-weight:700;font-size:13pt;display:flex;align-items:center}
.sitmap{flex:1;border:1px solid #111;min-height:0}
.sitcol{flex:1;display:flex;flex-direction:column;gap:2mm}
.sitcol p{margin:0;font-size:9pt}
.bord{width:100%;border-collapse:collapse;font-size:10pt}
.bord td,.bord th{border:1px solid #999;padding:2mm 3mm;text-align:left;vertical-align:top}
.bord th{background:#f0f0f0}
.facades{display:grid;grid-template-columns:1fr 1fr;gap:4mm;flex:1}
.facades figure{margin:0;border:1px solid #ccc;display:flex;flex-direction:column}
.facades figcaption{font-size:9pt;font-weight:600;padding:1mm 2mm}
.facades svg{flex:1;width:100%}
.ins-pair{display:grid;grid-template-columns:1fr 1fr;gap:5mm;flex:1}
.ins-pair figure{margin:0;display:flex;flex-direction:column;min-height:0}
.ins-pair figcaption{font-size:9pt;font-weight:600;margin-bottom:1mm}
.ins-pair .ph{position:relative;flex:1;overflow:hidden;border:1px solid #ccc;background:#eee;display:flex;align-items:center;justify-content:center}
.ins-pair .ph img{max-width:100%;max-height:100%}
.notice{font-size:11pt;line-height:1.6;max-width:210mm}
.notice [contenteditable]{outline:1px dashed #bbb;padding:1mm}
.blank{display:inline-block;min-width:50mm;border-bottom:1px dotted #111}
.tbd{color:#a4481b;font-style:italic}

@media print{
  @page{size:A4 landscape;margin:0}
  body{background:#fff}
  .no-print{display:none!important}
  #dossier{display:block!important;padding:0}
  .page{box-shadow:none;page-break-after:always;break-after:page}
  .notice [contenteditable]{outline:0}
  .filigrane{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
.pm{margin:0;display:flex;flex-direction:column;align-items:center;gap:1mm}
.pm figcaption{font-size:9pt;font-weight:600}
.pm svg{border:1px solid #ccc}

.vues{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:10px}
.vues button{border:0;border-radius:0;padding:7px 16px}
.vues button.on{background:var(--accent);color:#fff}
#vue3d{height:560px;border-radius:8px;overflow:hidden;touch-action:none}
#vue3d canvas{display:block}
#vue3d.saisie canvas{cursor:grabbing!important}

.mesure{margin-top:14px}
.mesure-l{display:flex;gap:8px}
.mesure-l select{flex:1.4;min-width:0}
.mesure-l input{flex:1;min-width:0;width:80px}
.mesure select,.mesure input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.mesure input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
#mesureMsg:empty{display:none}
.histo{display:flex;gap:8px;margin-top:12px}
.histo button:disabled{opacity:.45;cursor:default}
#vue3d{position:relative}
.calque3d,.bulle3d{position:absolute;left:0;top:0;pointer-events:none}
.calque3d span{position:absolute;left:0;top:0;background:#fff;color:#1565c0;border:1px solid #1565c0;border-radius:5px;padding:1px 6px;font-size:12px;font-weight:600;white-space:nowrap}
.bulle3d{background:#1d2a24;color:#fff;border-radius:6px;padding:4px 8px;font-size:13px;opacity:0;transition:opacity .1s;white-space:nowrap}
.bulle3d.on{opacity:1}
.aimant{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin-top:12px}
.aimant input{margin-top:3px}

.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media (max-width:860px){.projets{grid-template-columns:1fr}}
.projet{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:20px;border-radius:14px;background:#fff}
.projet b{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:600}
.projet span{color:var(--muted);font-size:14px}
.projet:not(:disabled):hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-2)}
.projet:disabled{opacity:.55;cursor:default}
.zones{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.zones button.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.el{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.el-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.el-tete .ops button{padding:3px 9px;font-size:13px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.champs label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px;min-width:0}
.champs input,.champs select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);min-width:0;width:100%}
.large{grid-column:1/-1}
.teintes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.teintes button{width:24px;height:24px;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.teintes button.on{box-shadow:0 0 0 2px var(--accent)}
.ajout{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ajout button{font-size:13px;padding:7px 10px}
.barre{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#apercuZone svg{width:100%;height:auto}
#planTrace{width:100%;height:560px;display:block}
#planTrace .limite{cursor:pointer}
#planTrace .limite:hover .vis{stroke:#f08a24}
.zone-ctl{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;margin-bottom:10px;cursor:pointer}
.zone-ctl.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-2)}
.piece{display:grid;grid-template-columns:70px 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.piece .code{font-weight:700}
.piece .statut{display:inline-block;font-size:11px;font-weight:600;border-radius:6px;padding:1px 7px;margin-left:6px}
.statut.exigee{background:var(--warn-bg);color:var(--warn)}.statut.conseillee{background:#fdf6dd;color:#8a6d00}.statut.inutile{background:#eef1ec;color:var(--muted)}
.piece .comment{font-size:13px;color:var(--accent);margin-top:4px}

/* ---------- Formulaires d'objets (configurateur et dossier) ---------- */
.el{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.el-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.el-tete b{font-size:15px}
.el-tete .ops button{padding:3px 9px;font-size:13px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.champs label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px;min-width:0}
.champs input,.champs select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);min-width:0;width:100%}
.large{grid-column:1/-1}
.teintes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.teintes button{width:24px;height:24px;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.teintes button.on{box-shadow:0 0 0 2px var(--accent)}
.teintes .mat{width:auto;border-radius:12px;padding:0 8px;font-size:11px;height:24px}

/* ---------- Zoom des plans ---------- */
.planbox{position:relative}
#planTrace{width:100%;height:560px;touch-action:none;display:block}
.zoomctl{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:4px}
.zoomctl button{width:34px;height:34px;padding:0;font-size:18px;line-height:1;box-shadow:0 1px 4px #0002}

/* ---------- Aperçu filigrané, notice, panneau ---------- */
.filigrane{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
mark.manque{background:#fff1a8;color:#8a4b00;padding:0 3px;border-radius:3px;font-weight:600}
.facades.deux{grid-template-rows:1fr}
.form-objet .champs{grid-template-columns:1fr 1fr}
.form textarea{font:inherit;color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;resize:vertical}
.suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.suggestions button{font-size:12px;padding:4px 9px;border-radius:99px;background:var(--accent-2);border-color:transparent;color:var(--accent)}
.panneau-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
@media (max-width:860px){.panneau-form{grid-template-columns:1fr}}
.panneau-form input{font:inherit;color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:8px}
#apercuPanneau{container-type:inline-size;max-width:760px}
.panneau-a{position:relative;aspect-ratio:3/2;border:0.6cqw solid #111;padding:2.5cqw 3cqw;display:flex;flex-direction:column;font-size:1.9cqw;background:#fff;overflow:hidden;color:#111}
.panneau-a .t{font-size:5.2cqw;font-weight:800;text-align:center;letter-spacing:.02em;margin-bottom:1.6cqw}
.panneau-a .row{display:grid;grid-template-columns:32% 1fr;gap:1.5cqw;border-bottom:1px solid #999;padding:.55cqw 0}
.panneau-a .recours{margin-top:auto;font-size:1cqw;border:1px solid #111;padding:1cqw;line-height:1.35}
.panneau-a .blank{min-width:24cqw}
.grid2>*{min-width:0}
.ajout{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ajout button{font-size:13px;padding:7px 10px}

/* ---------- Formules ---------- */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 4px}
@media (max-width:860px){.formules{grid-template-columns:1fr}}
.formule{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:baseline;align-content:start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff}
.formule.on{border-color:var(--accent);background:var(--accent-2)}
.formule.grise{opacity:.45}
.formule .ft{font-weight:700}
.formule .fp{font-family:Fraunces,Georgia,serif;font-size:22px}
.formule ul{grid-column:1/-1;margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}
.suivi{list-style:none;padding:0;margin:8px 0;font-size:14px}
.suivi li{padding:4px 0;color:var(--muted)}
.suivi li.fait{color:var(--ok);font-weight:600}

.entete-marque{margin:8px 0 22px}
.pied{max-width:1180px;margin:0 auto;padding:18px 16px 40px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
@media print{.pied{display:none}}

/* =====================================================================
   Application : barre latérale (dossiers, étapes), barre du haut, progression,
   barre d'action collante. Grand écran : barre fixe à gauche ; téléphone : tiroir.
   ===================================================================== */
body.app{background:var(--bg)}
.laterale{position:fixed;inset:0 auto 0 0;width:276px;background:#0f2442;color:#c9d6e8;display:flex;flex-direction:column;padding:18px 14px 14px;overflow-y:auto;z-index:1200;scrollbar-width:thin}
.barre-tete{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 14px}
.laterale .fermer{display:none;background:none;border:0;color:#c9d6e8;font-size:18px;padding:6px 8px}
.nouveau{width:100%;background:var(--degrade);color:#fff;border:0;border-radius:10px;padding:11px 14px;font-weight:600;text-align:left;box-shadow:0 6px 18px rgba(31,122,116,.35)}
.nouveau:hover{filter:brightness(1.06)}
.barre-titre{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f94b3;margin:20px 8px 8px;font-weight:600}
.dossiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:30vh;overflow-y:auto}
.dossiers li{position:relative;display:flex;flex-direction:column;padding:8px 30px 8px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.dossiers li:hover{background:#17345c}
.dossiers li.actif{background:#1b3d69;cursor:default}
.d-nom{color:#e8eef7;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-info{font-size:11px;color:#8ea3c2}
.d-suppr{position:absolute;right:4px;top:8px;background:none;border:0;color:#7f94b3;padding:2px 6px;font-size:12px;opacity:0}
.dossiers li:hover .d-suppr{opacity:1}
.laterale .steps{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;counter-reset:none}
.laterale .steps li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#9fb2cc;font-size:14px;background:none}
.laterale .steps li::before{content:none}
.laterale .steps li.on{background:#e8f4f1;color:var(--navy);font-weight:600}
.laterale .steps li.done{color:#dbe6f3;cursor:pointer}
.laterale .steps li.done:hover{background:#17345c}
.pastille{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#17345c;flex:none}
.pastille svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps li.on .pastille{background:var(--degrade);color:#fff}
.steps li.done .pastille{background:#1e6b55;color:#bff0d9}
.barre-liens{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:2px}
.barre-liens a{display:flex;align-items:center;gap:10px;color:#c9d6e8;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:14px}
.barre-liens a:hover{background:#17345c;color:#fff}
.barre-liens svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.barre-mention{font-size:11px;color:#6f84a3;margin:10px 10px 0}
.principal{margin-left:276px;min-height:100vh;display:flex;flex-direction:column}
.appbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:14px;padding:12px 28px;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.appbar .menu{display:none;background:none;border:0;padding:6px;border-radius:8px}
.appbar .menu svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.appbar-titre{display:flex;flex-direction:column;line-height:1.2}
.appbar-titre span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.appbar-titre b{font-family:var(--titres);font-size:17px;color:var(--ink)}
.appbar-dossier{margin-left:auto;font-size:13px;color:var(--muted);max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#f2f5f9;border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.progression{height:3px;background:#e3e9f1;position:sticky;top:61px;z-index:999}
.progression span{display:block;height:100%;background:var(--degrade);transition:width .35s ease;border-radius:0 3px 3px 0}
.principal main{max-width:1180px;width:100%;margin:0 auto;padding:28px 28px 40px;flex:1}
.principal .pied{max-width:1180px;width:100%}
.principal #dossier{padding:0 28px 60px}
/* Titres et cartes */
.principal h1{font-size:30px;margin:4px 0 6px}
.lead{font-size:16px}
.card{border-color:var(--line);border-radius:14px;box-shadow:var(--ombre)}
.form fieldset{border-color:var(--line);border-radius:14px;box-shadow:var(--ombre)}
.el{border-radius:14px;box-shadow:var(--ombre);border-color:var(--line)}
.big{font-family:var(--titres);font-weight:700;color:var(--navy)}
button{border-radius:10px;border-color:var(--line);transition:transform .1s ease, box-shadow .15s ease, filter .15s ease}
button:active{transform:translateY(1px)}
button.primary{background:var(--degrade);border:0;box-shadow:0 6px 16px rgba(31,122,116,.28)}
button.primary:hover{filter:brightness(1.05)}
.form input,.form select,.form textarea,.champs input,.champs select,.addr input{border-radius:10px}
.form input:focus,.form select:focus,.form textarea:focus,.champs input:focus,.champs select:focus{outline:2px solid #9fd3c7;border-color:var(--accent)}
.addr input{box-shadow:var(--ombre);border-color:var(--line)}
.addr input:focus{border-color:var(--accent)}
.map,.planbox,#vue3d{border-radius:14px}
.planbox{border-color:var(--line);box-shadow:var(--ombre)}
.zones button.on,.vues button.on{background:var(--navy);border-color:var(--navy)}
.badge.ok{background:var(--accent-2);color:var(--ok)}
/* Choix du projet : cartes à icône */
.entete-marque{margin:0 0 18px}
.projets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.projet{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--ombre);transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.projet:hover{transform:translateY(-2px);border-color:#9fd3c7;box-shadow:0 10px 28px rgba(19,41,75,.10)}
.projet .pico{grid-row:1/3;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--accent-2);fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.projet b{font-family:var(--titres);font-weight:600;font-size:16px;color:var(--ink)}
.projet span{font-size:13px;color:var(--muted)}
.projet:disabled{opacity:.5}
/* Barre d'action : toujours sous la main */
.step .actions{position:sticky;bottom:0;z-index:900;margin:28px -28px 0;padding:14px 28px;background:rgba(242,245,249,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.step .actions button{min-width:140px}
/* Étape dossier : pages à l'échelle de l'écran */
#dossier .page{border-radius:6px}
/* ---------- Téléphone et tablette : tiroir, barre du haut compacte, gros boutons ---------- */
@media (max-width:980px){
  .laterale{transform:translateX(-100%);transition:transform .25s ease;box-shadow:12px 0 40px rgba(0,0,0,.25);width:300px}
  .laterale .fermer{display:block}
  body.barre-ouverte .laterale{transform:none}
  .voile{position:fixed;inset:0;background:rgba(10,22,40,.45);z-index:1100;opacity:0;pointer-events:none;transition:opacity .25s}
  body.barre-ouverte .voile{opacity:1;pointer-events:auto}
  .principal{margin-left:0}
  .appbar{padding:10px 14px;gap:10px}
  .appbar .menu{display:block}
  .appbar-dossier{display:none}
  .progression{top:57px}
  .principal main{padding:18px 16px 24px}
  .principal #dossier{padding:0 8px 40px;overflow-x:auto;align-items:flex-start}
  .principal h1{font-size:24px}
  .step .actions{margin:22px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
  .step .actions button{flex:1;min-width:0;padding:14px 12px}
  .projets{grid-template-columns:1fr}
  #planEdit,#planTrace{height:420px}
  #vue3d{height:420px}
}
@media print{
  .laterale,.voile,.appbar,.progression{display:none!important}
  .principal{margin:0}
  .principal main{display:none}
  .principal #dossier{padding:0}
}

/* Je suis sur place */
.localiser{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 4px}
#localiser{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);box-shadow:var(--ombre)}
#localiser svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
#localiser:disabled{opacity:.6}
#localiserInfo:empty{display:none}

/* ---------- Marque Bon pour travaux (logos vectoriels de img/, générés par generer-logo.py) ---------- */
.marque-img{display:inline-flex;align-items:center;line-height:0}
.marque-img img{display:block;height:auto}
.logo-barre img{width:178px}
.logo-entete img{height:46px;width:auto}
.logo-hero img{width:min(420px,88vw)}
/* Noms de dossiers longs : coupés par des points de suspension, jamais de défilement horizontal */
.laterale{overflow-x:hidden}
.laterale > *{min-width:0}
.dossiers,.dossiers li{min-width:0;max-width:100%}
.laterale .steps{flex-wrap:nowrap;align-items:stretch}
.laterale{align-items:stretch}

/* Champs photo : grande zone à toucher ou à glisser (depotphoto.js) */
.depot{position:relative;display:flex;align-items:center;gap:14px;margin-top:12px;padding:16px 18px;border:2px dashed #8fc4bb;border-radius:14px;background:var(--accent-2);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.depot:hover,.depot.survol{border-color:var(--accent);background:#d2ebe5}
.depot.survol{transform:scale(1.01)}
.depot:focus-within{outline:3px solid rgba(31,122,116,.35);outline-offset:2px}
.depot input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.depot-icone{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--accent);box-shadow:0 6px 14px -6px rgba(31,122,116,.7)}
.depot-icone svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.depot-texte{display:flex;flex-direction:column;min-width:0}
.depot-texte b{font-size:16px;font-weight:600;color:var(--accent)}
.depot-texte small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.depot.pret{border-style:solid;border-color:#9fd1b6;background:#eaf6ef}
.depot.pret .depot-icone{background:var(--ok);box-shadow:none}
.depot.pret .depot-texte b{color:var(--ok)}
.reglages-photo{margin:12px 0}

/* Aide à l'installation sur iPhone (installer.js) */
.aide-install{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:3000;display:flex;gap:12px;align-items:center;max-width:460px;margin:0 auto;padding:14px 14px 14px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -12px rgba(19,41,75,.35)}
.aide-install img{flex:none;border-radius:11px}
.aide-install p{margin:0;font-size:14px;color:var(--muted)}
.aide-install b{display:block;color:var(--ink);font-size:15px}
.aide-install .partager svg{width:18px;height:18px;vertical-align:-3px;fill:none;stroke:#1f6fd1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aide-install button{flex:none;align-self:flex-start;border:0;background:none;font-size:16px;color:var(--muted);cursor:pointer;padding:2px 4px}

/* Téléphone : petit logo dans l'en-tête plutôt que le grand logo sous l'en-tête ; bouton pour continuer dès la formalité */
.appbar-logo,.poursuivre-mobile{display:none}
@media (max-width:980px){
  .appbar-logo{display:block;margin-left:auto;flex:none}
  .appbar-logo img{display:block;height:34px;width:auto}
  .entete-marque{display:none}
  .poursuivre-mobile{display:block;width:100%;margin-top:14px;padding:14px 12px}
}