:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3f5059;background:#f2f5f5}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #639ab0;outline-offset:2px}[hidden]{display:none!important}
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;max-width:1600px;margin:auto}
.topbar{min-height:80px;display:flex;align-items:center;padding:10px 22px;gap:20px;border-bottom:1px solid #dce4e6;background:#f7f9f9}
.brand{display:flex;gap:8px;align-items:center;flex-shrink:0}.brand strong{font-size:19px;letter-spacing:-1px;font-weight:850;color:#3e5659;white-space:nowrap}.brand-mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(90deg,#69ba93 0 33%,#efa25d 33% 66%,#73b5cf 66%)}
.summary{display:flex;flex:1;gap:7px;justify-content:center;min-width:0}.summary-cell{padding:7px 11px;min-width:100px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e2e8e9;border-radius:12px;min-height:51px}.summary-cell small{font-size:9px;font-weight:750;letter-spacing:.5px;color:#89989e;white-space:nowrap}.summary-cell strong{font-size:19px;font-weight:760;line-height:1.1;font-variant-numeric:tabular-nums}.summary-cell.orange strong{color:#d48646}.summary-cell.blue strong{color:#4b9fbe}.summary-cell .faint{color:#a9b5b8;font-weight:400}.summary-cell .unit{font-size:12px;color:#899da3}.summary-cell .tiny{font-size:9px;color:#ad7777;font-weight:600}.summary-cell.full{border-color:#edbec3;background:#fff0f0}.summary-cell.full strong{color:#df616a}.controls{display:flex;gap:5px;align-items:center}.action-button{border:1px solid #dce4e5;color:#516b73;background:#fff;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:750;white-space:nowrap}.action-button:hover{background:#eef4f4}.action-button.active{background:#dff2e7;border-color:#89c09d;color:#2c7650}.square{width:35px;height:35px;padding:0;display:grid;place-items:center;font-size:18px}
.workspace{display:flex;position:relative;min-height:0;flex:1;padding:10px 14px}.stage-wrap{min-width:0;display:flex;flex-direction:column;flex:1}.stage-head,.stage-foot{height:23px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-size:10px;letter-spacing:.5px;color:#91a0a6}.stage-head{font-weight:700}.stage-foot{font-size:9px}.stage{flex:1;min-height:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid #d5dfe1;background:#e3e8e9;touch-action:none;cursor:crosshair}.stage canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.board-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:8px 13px;border-radius:30px;background:#ffffffd9;color:#7e929b;font-size:11px;pointer-events:none;white-space:nowrap;box-shadow:0 1px 6px #98a6ae10;transition:opacity .2s}.board-hint.hidden{opacity:0}.zoom-indicator{position:absolute;right:10px;bottom:10px;font-size:10px;border-radius:6px;background:#ffffffaf;padding:5px 7px;color:#82929b;pointer-events:none}
.toolbar{display:flex;align-items:center;justify-content:center;gap:8px;min-height:74px;padding:11px 12px calc(11px + env(safe-area-inset-bottom));border-top:1px solid #dce4e6;background:#f7f9f9}.tool{display:flex;align-items:center;gap:9px;border:1px solid #e0e7e9;border-radius:12px;background:#fff;color:#60737c;padding:10px 14px;font-size:12px;font-weight:750;min-height:44px}.tool.active{background:#e9f3f6;border-color:#7fb2c3;color:#2d718a}.tool:hover{background:#edf4f5}.tool-swatch{width:20px;height:20px;border-radius:6px;display:block;flex-shrink:0}.road-swatch{background:#fdfdfd;border:2px solid #d1d9dc}.oneway-swatch{display:grid;place-items:center;color:#80939b;background:#e9f1f3;font-size:17px}.green-swatch{background:#6bb893}.orange-swatch{background:#efa15d}.blue-swatch{background:#73b5cf}.tool-divider{height:27px;width:1px;background:#dbe5e8;margin:0 5px}
.inspector{position:absolute;z-index:4;top:43px;right:28px;width:258px;max-height:calc(100% - 75px);overflow:auto;background:#ffffffef;border:1px solid #d9e4e7;border-radius:15px;padding:17px;box-shadow:0 16px 50px #546b7624;backdrop-filter:blur(8px)}.inspector:has(.inspector-placeholder:not([hidden])){display:none}.inspector-placeholder{display:none}.inspector-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.inspector h2{font-size:16px;margin:0 0 6px}.inspector h3{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#85979e;margin:16px 0 8px}.inspector p{font-size:11px;color:#8c9ba2;line-height:1.5;margin:7px 0}.metric{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f2;font-size:11px;color:#84959c}.metric strong{font-size:13px;color:#3d555f;font-variant-numeric:tabular-nums}.inspector-actions{display:flex;gap:8px;margin-top:16px}.inspector button{background:#eef4f5;color:#58717d;border:1px solid #dae5e8;border-radius:8px;padding:9px;font-size:11px;font-weight:750}.inspector button:hover{filter:brightness(.97)}.inspector .danger{color:#b65b62;background:#fff0f1;border-color:#f2d3d6}.choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.choice-grid button{padding:8px 2px;font-size:16px}.choice-grid button.active{background:#d9edf1;border-color:#70afc2;color:#236a83}.entry-grid{display:flex;flex-wrap:wrap;gap:5px}.entry-grid button.active{background:#d9f0df;border-color:#82c595;color:#37794b}.close-inspector{padding:2px 8px!important;background:none!important;border:0!important;font-size:22px!important}
.menu-popover{position:fixed;top:65px;right:12px;width:255px;z-index:12;border-radius:12px;padding:9px;background:#fff;box-shadow:0 16px 50px #43586338;border:1px solid #e4eded}.menu-popover button{display:block;border:0;border-radius:8px;background:none;text-align:left;width:100%;padding:12px;font-size:12px;color:#55707b}.menu-popover button:hover{background:#edf3f4}.menu-popover p{font-size:10px;color:#8ba1a9;margin:5px 10px;line-height:1.5}.toast{position:fixed;z-index:10;left:50%;bottom:90px;transform:translate(-50%,10px);padding:10px 15px;border-radius:10px;background:#455e68;color:#fff;font-size:12px;pointer-events:none;opacity:0;transition:.2s;text-align:center;max-width:95vw}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#2b435258;display:grid;place-items:center;z-index:20;padding:20px}.modal{border-radius:16px;background:#fff;padding:25px;max-width:340px;width:100%;box-shadow:0 16px 70px #22384444}.modal h2{margin:0;font-size:20px}.modal p{font-size:13px;line-height:1.6;color:#82939a}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.modal button{border:0;background:#e9f1f2;color:#55707b;padding:10px 14px;border-radius:8px;font-size:12px}.modal button.danger{background:#e5747a;color:white}
@media(max-width:900px){.topbar{padding:8px 10px;gap:8px;flex-wrap:wrap}.brand{margin-right:auto}.summary{order:3;width:100%;flex:auto;gap:4px}.summary-cell{flex:1;min-width:0;padding:6px 7px}.summary-cell strong{font-size:17px}.summary-cell small{font-size:8px;letter-spacing:0}.controls{gap:3px}.action-button{padding:8px;font-size:11px}.square{width:30px;height:30px;padding:0}.toolbar{gap:4px;min-height:68px}.tool{padding:8px 10px}.inspector{right:20px}}
@media(max-width:590px){.topbar{gap:6px;min-height:93px;padding:7px}.brand strong{font-size:15px}.brand-mark{width:16px;height:16px;border-radius:4px}.action-button.heat{font-size:10px;padding:7px}.summary-cell{padding:5px 5px;min-height:40px;border-radius:8px}.summary-cell small{font-size:7px}.summary-cell strong{font-size:14px}.summary-cell .unit{font-size:9px}.summary-cell .tiny{font-size:7px}.workspace{padding:4px 5px}.stage-head,.stage-foot{font-size:8px;height:19px;padding:0 5px}.stage-foot span:last-child{max-width:70%;text-align:right}.stage{border-radius:10px}.toolbar{min-height:70px;padding:7px 4px calc(7px + env(safe-area-inset-bottom));gap:3px}.tool{padding:6px 2px;flex:1;min-width:0;border-radius:9px;flex-direction:column;gap:4px;font-size:9px;min-height:53px}.tool-swatch{width:17px;height:17px;border-radius:5px}.tool-divider{margin:0;width:1px;height:30px}.inspector{top:auto;bottom:10px;right:9px;width:min(280px,calc(100% - 16px));max-height:58%;padding:13px}.board-hint{font-size:9px;white-space:normal;text-align:center;max-width:95%}.toast{bottom:84px;font-size:11px}}

.garden-swatch{background:#a4c68a;position:relative;overflow:hidden}.garden-swatch:after{content:"";position:absolute;width:7px;height:7px;border-radius:100%;background:#6da17c;top:4px;left:4px;box-shadow:8px 5px 0 #6da17c,2px 10px 0 #6da17c}
@media(max-width:590px){.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-height:auto;padding:7px 7px calc(7px + env(safe-area-inset-bottom))}.toolbar .tool-divider{display:none}.toolbar .tool{width:100%;font-size:10px;min-height:43px;padding:4px 3px;gap:3px;flex-direction:row;justify-content:center}.toolbar .tool-swatch{width:16px;height:16px}.toolbar .oneway-swatch{font-size:14px}.toast{bottom:104px}}

/* Ultra-flat warm visual treatment */
:root{color:#4D625A;background:#F2F3F1}
.topbar,.toolbar{background:#F7F8F5;border-color:#E0E5E0}
.topbar{min-height:65px;padding:7px 19px;gap:14px}
.brand strong{font-size:17px;color:#4B675B}
.brand-mark{background:linear-gradient(90deg,#70B78E 0 33%,#E8A05A 33% 66%,#76B5CD 66%)}
.summary{gap:2px}
.summary-cell{background:transparent;border:0;border-radius:0;min-height:45px;padding:6px 13px;position:relative}
.summary-cell:not(:last-child):after{content:"";position:absolute;right:0;top:13%;height:72%;width:1px;background:#E3E7E3}
.summary-cell small{color:#94A29A;font-size:9px}
.summary-cell strong{color:#43594F;font-size:18px}
.summary-cell.orange strong{color:#C9814C}
.summary-cell.blue strong{color:#559CB9}
.summary-cell.full{background:#FBEAEA;border-radius:9px}
.action-button{background:transparent;border-color:#DBE3DC;border-radius:9px;color:#62776C}
.action-button.active{background:#E4F2E8;border-color:#A0CDB1;color:#477A59}
.action-button:hover{background:#EAF0EA}
.workspace{padding:8px 12px}
.stage{background:#F2F3F1;border-color:#E3E8E2;border-radius:11px}
.stage-head,.stage-foot{color:#A1ABA3}
.tool{background:transparent;border-color:#E0E6DF;border-radius:10px;color:#697C70;box-shadow:none}
.tool.active{background:#E8F2EA;border-color:#A6C7AE;color:#3D7555}
.tool:hover{background:#EAF1EB}
.road-swatch{background:#FFFEFC;border:1.5px solid #CDD3CF}
.oneway-swatch{background:#F4F6F3;border:2px solid #A4B2B1;color:#9DAEAD}
.green-swatch{background:#F0F9F2;border:3px solid #70B78E}
.orange-swatch{background:#FFF7EE;border:3px solid #E8A05A}
.blue-swatch{background:#EFF8FC;border:3px solid #76B5CD}
.garden-swatch{background:#D2E8CC;border:2px solid #91C59A}
.inspector{background:#FFFFFFF5;border-color:#E0E6E1;box-shadow:0 10px 36px #60726918;backdrop-filter:none}
@media(max-width:900px){.topbar{padding:7px 10px;gap:7px;min-height:68px}.summary-cell{padding:6px 7px}}
@media(max-width:590px){.topbar{min-height:86px}.summary-cell{padding:4px 4px;min-height:37px}.summary-cell strong{font-size:14px}.summary-cell small{font-size:7px}.summary-cell:not(:last-child):after{top:10%;height:80%}.stage{border-radius:8px}}

/* Interface V7 : trois indicateurs, plateau prioritaire */
.summary{gap:8px;justify-content:flex-end}.summary-cell{min-width:116px}
.stage-foot{height:23px;justify-content:space-between}.topbar{min-height:65px}.toolbar{min-height:65px}
.stage{background:#F2F3F1}


/* V8 — Choix du mode, score et barre de congestion */
#app[data-mode="partie"] .free-only{display:none!important}
#app:not([data-mode="partie"]) .party-only,
#app:not([data-mode="partie"]) .party-hud{display:none!important}
#app[data-mode="partie"] .party-hud{display:flex!important}
#app[data-mode="partie"] #restart{display:inline-flex!important}
#app[data-mode="partie"] .topbar{min-height:80px;gap:18px}
#app[data-mode="partie"] .controls{margin-left:auto}
.party-hud{display:flex;align-items:center;justify-content:center;gap:25px;min-width:0;flex:1}
.score-block{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.score-block small,.life-heading>span{color:#82958B;font-size:10px;font-weight:800;letter-spacing:.7px}
.score-block strong{color:#377E58;font-size:34px;font-weight:850;line-height:1.12;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.life-block{width:clamp(165px,28vw,335px);display:flex;flex-direction:column;gap:6px;min-width:0}
.life-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.life-heading strong{font-size:23px;color:#3F6358;font-variant-numeric:tabular-nums;white-space:nowrap}
.life-heading strong small{font-size:11px;color:#96A49B}
.life-track{height:13px;border-radius:30px;background:#DEE7DE;overflow:hidden;box-shadow:inset 0 1px 2px #607A6018}
.life-fill{width:0;height:100%;background:#78B899;border-radius:inherit;transition:width .22s,background-color .22s}
.danger-note{font-size:10px;color:#B6635C;min-height:11px;font-weight:720;line-height:1.2}
#app[data-mode="partie"].is-danger .life-track{box-shadow:0 0 0 2px #ECA7A3A8}
#app[data-mode="partie"].is-danger .life-heading strong{color:#CA625E}
#restart{gap:5px;align-items:center;justify-content:center;min-height:39px;background:#FBEDE9;color:#9D655E;border-color:#EBD2CA}
.restart-symbol{font-size:20px;line-height:1}
.mode-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#F2F3F1;padding:16px;overflow:auto}
.mode-panel{width:min(100%,480px);margin:auto;text-align:center;padding:18px 6px}
.mode-mark{display:flex;justify-content:center;gap:5px;margin-bottom:19px}
.mode-mark i{width:24px;height:24px;border-radius:7px;background:#70B78E}
.mode-mark i:nth-child(2){background:#E8A05A}.mode-mark i:nth-child(3){background:#76B5CD}
.eyebrow{font-size:11px;color:#769184;font-weight:800;letter-spacing:2.2px;margin:0 0 7px}
.mode-panel h1{font-size:clamp(27px,5vw,36px);color:#405E50;line-height:1.15;letter-spacing:-1.2px;margin:0 0 9px}
.mode-description{color:#879B8D;font-size:14px;margin:0 0 27px}
.mode-options{display:grid;gap:11px}
.mode-option{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border-radius:17px;border:1px solid #DDE7DF;background:#FFFFFF;padding:18px 19px;color:#476055;min-height:90px}
.mode-option:hover{background:#F5FAF6;border-color:#7DAE8C}
.mode-option:focus-visible{outline:3px solid #70B78E;outline-offset:3px}
.mode-option.primary{border-color:#A8D5B5;background:#E7F4EB}
.mode-option-icon{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:14px;background:#E6F1E9;color:#529776;font-size:28px;font-weight:700}
.party-icon{background:#D1E8D9}
.mode-option>span:nth-child(2){flex:1;min-width:0}
.mode-option strong{display:block;font-size:18px;line-height:1.35}
.mode-option small{display:block;font-size:12px;color:#789183;line-height:1.45;margin-top:3px}
.mode-arrow{font-size:30px;color:#7DA58A}
.mode-footnote{font-size:11px;color:#98A79C;margin:19px 0 0;line-height:1.5}
.modal .primary-button{background:#64A77D;color:white;font-weight:800}
.gameover-modal{text-align:center;max-width:410px;width:100%;padding:30px 26px}
.gameover-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#FCE8E5;color:#CE6862;font-weight:850;font-size:30px;margin:0 auto 16px}
.gameover-modal h2{font-size:28px;letter-spacing:-.8px;color:#40574C}
.gameover-modal p{font-size:13px;line-height:1.5}
.final-score{margin:22px auto 18px;padding:20px;background:#EFF7F1;border:1px solid #DAEADD;border-radius:15px;display:flex;flex-direction:column;gap:3px}
.final-score span{font-size:10px;font-weight:800;letter-spacing:1px;color:#73947D}
.final-score strong{font-size:52px;line-height:1.1;letter-spacing:-2px;color:#407F58;font-variant-numeric:tabular-nums}
.final-score small{font-size:11px;color:#829887}
.gameover-modal .modal-actions{justify-content:center;flex-wrap:wrap}
.gameover-modal .modal-actions button{min-height:43px;flex:1}
#restart-confirm .modal-actions{flex-wrap:wrap}
#restart-confirm .modal-actions button{min-height:42px}
/* Informations du logement en fenêtre compacte */
.inspector{width:clamp(245px,25vw,294px);border-radius:16px;padding:16px;max-height:calc(100% - 26px);top:13px;right:14px}
.inspector-heading h2{font-size:17px;margin:0}
.inspector-heading{padding-bottom:8px;border-bottom:1px solid #E8EEE9;margin-bottom:8px}
.inspector h3{margin:12px 0 6px}
.inspector .metric{padding:8px 0;font-size:12px}
.inspector .metric strong{font-size:13px}
.inspector .house-quality{height:7px;border-radius:10px;background:#E5ECE7;overflow:hidden;margin:8px 0 10px}
.inspector .house-quality>div{height:100%;border-radius:inherit;background:#70B78E}
.inspector .house-quality>div.low{background:#DD7773}
.inspector .house-quality>div.mid{background:#E4B467}
.inspector .house-summary{font-size:11px;line-height:1.4;color:#8B9D90;margin:0 0 6px}
.inspector .inspector-actions button{min-height:43px;flex:1}
@media(max-width:900px){
  #app[data-mode="partie"] .topbar{gap:10px;min-height:74px}
  .party-hud{gap:14px}
  .score-block strong{font-size:29px}
  .life-block{width:clamp(140px,28vw,260px)}
  .life-heading strong{font-size:19px}
}
@media(max-width:590px){
  #app[data-mode="partie"] .topbar{min-height:77px;padding:7px 8px;flex-wrap:nowrap;gap:7px}
  #app[data-mode="partie"] .brand{display:none}
  .party-hud{flex:1;min-width:0;gap:10px;justify-content:flex-start}
  .score-block small,.life-heading>span{font-size:8px;letter-spacing:.1px}
  .score-block strong{font-size:26px}
  .life-block{width:auto;flex:1;max-width:none;min-width:78px;gap:4px}
  .life-heading{gap:4px}
  .life-heading strong{font-size:16px}
  .life-heading strong small{font-size:9px}
  .life-track{height:10px}
  .danger-note{font-size:8px;min-height:10px}
  #app[data-mode="partie"] .controls{margin:0;gap:4px;flex-shrink:0}
  #app[data-mode="partie"] #restart{min-height:34px;padding:4px 6px;font-size:10px;gap:3px}
  .restart-symbol{font-size:18px}
  #app[data-mode="partie"] #pause{width:34px;height:34px}
  .workspace{padding:4px 5px}
  .inspector{top:auto;right:6px;bottom:5px;left:6px;width:auto;max-height:min(59%,440px);padding:13px 15px;border-radius:15px;box-shadow:0 0 0 1px #E0E8E0,0 -8px 32px #3E604E18}
  .inspector-heading h2{font-size:16px}
  .inspector .metric{padding:7px 0}
  .inspector .close-inspector{min-width:38px;min-height:38px}
  .inspector .choice-grid button,.inspector .entry-grid button{min-height:40px}
  .mode-panel{padding:18px 0}
  .mode-option{min-height:84px;padding:13px}
  .mode-option strong{font-size:16px}
  .modal{padding:20px 18px}
  .gameover-modal .final-score strong{font-size:46px}
}
@media(max-width:360px){
  .restart-label{display:none}
  #app[data-mode="partie"] #restart{width:34px;padding:0}
  .life-heading strong{font-size:14px}
  .mode-option-icon{width:39px;height:39px;font-size:24px}
}