:root{
      --bg:#fff;--panel:rgba(240,242,245,.95);--stroke:rgba(0,20,40,.12);--stroke2:rgba(0,20,40,.22);
      --shadow:0 12px 40px rgba(0,20,40,.12);--shadow2:0 6px 20px rgba(0,20,40,.08);--radius-xl:24px;
      --wood:#c8a97e;--wood-dark:#8b6f47;--bath-fill:#fef3c7;--bath-stroke:#b8952a;
      --glass-stroke:#0d9488;--sofa:#64748b;--table:#a1887f;--storage:#475569;
      --sanitary:#f1f5f9;--wc:#e2e8f0;--shower:rgba(14,165,233,.12);
    }
    [data-theme="dark"]{
      --bg:#0b0f14;--panel:rgba(255,255,255,.06);--stroke:rgba(255,255,255,.14);--stroke2:rgba(255,255,255,.22);
      --text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.72);--accent:#d7c27a;--accent2:#6ee7ff;
      --shadow:0 12px 40px rgba(0,0,0,.55);--shadow2:0 6px 20px rgba(0,0,0,.45);
      --wood:#8b6f47;--wood-dark:#6b5235;--bath-fill:rgba(215,194,122,.12);--bath-stroke:rgba(215,194,122,.5);
      --glass-stroke:rgba(110,231,255,.4);--sofa:#475569;--table:#8b6f47;--storage:#334155;
      --sanitary:#1e293b;--wc:#334155;--shower:rgba(14,165,233,.08);
    }
    *{box-sizing:border-box} 
    body{
      background:var(--bg);
      color:var(--text);
      font-family:Inter,system-ui,sans-serif;
      transition:background .3s,color .3s;
      overflow-x:hidden;
      margin:0;
    }
    .planWrap{padding:16px}
    .planStage{
      border-radius:var(--radius-xl);
      border:1px solid var(--stroke);
      background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.98));
      padding:14px;
      position:relative;
      overflow:hidden;
      box-shadow:var(--shadow2);
      transition:all .3s;
    }
    [data-theme="dark"] .planStage{
      background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.04))
    }
    .svgBox{
      width:100%;
      height:auto;
      display:block;
      border-radius:18px;
      overflow:visible;
      box-shadow:0 8px 25px rgba(0,20,40,.1);
      background:var(--bg);
      transition:transform .3s;
    }
    .svgBox.clickable{cursor:pointer}
    
    /* Tooltip flottant */
    .plan-tooltip{
      position:fixed;
      pointer-events:none;
      z-index:9999;
      padding:12px 16px;
      border-radius:12px;
      background:var(--panel);
      border:1px solid var(--stroke);
      box-shadow:0 12px 30px rgba(0,0,0,.2);
      backdrop-filter:blur(8px);
      opacity:0;
      transform:translateY(8px);
      transition:opacity .2s,transform .2s;
      max-width:280px;
      font-size:13px;
      line-height:1.4;
    }
    .plan-tooltip.visible{opacity:1;transform:translateY(0)}
    .plan-tooltip .tt-title{
      font-weight:700;
      font-size:14px;
      margin-bottom:4px;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .plan-tooltip .tt-icon{font-size:18px}
    .plan-tooltip .tt-dims{
      color:var(--accent2);
      font-weight:600;
      font-size:12px;
    }
    .plan-tooltip .tt-desc{
      color:var(--muted);
      font-size:12px;
      margin-top:4px;
    }
    .plan-tooltip::after{
      content:'';
      position:absolute;
      bottom:-7px;
      left:50%;
      transform:translateX(-50%);
      border-left:7px solid transparent;
      border-right:7px solid transparent;
      border-top:7px solid var(--panel);
      filter:drop-shadow(0 1px 0 var(--stroke));
    }
    
    /* Zones interactives SVG */
    .clickable-zone{cursor:pointer;transition:opacity .2s}
    .clickable-zone:hover{opacity:.85}
    .clickable-zone.highlighted{filter:brightness(1.2) saturate(1.3)}
    
    /* Mode coupe */
    .cut-view{display:none}
    .cut-view.active{display:block}
    .plan-2d{transition:opacity .3s}
    .plan-2d.hidden{display:none}
    
    /* Indicateur de sélection */
    .selected-indicator{
      position:fixed;
      top:20px;
      left:50%;
      transform:translateX(-50%);
      padding:8px 16px;
      border-radius:999px;
      background:var(--accent2);
      color:#fff;
      font-size:13px;
      font-weight:600;
      box-shadow:0 4px 15px rgba(13,148,136,.3);
      z-index:999;
      opacity:0;
      transition:opacity .3s;
      pointer-events:none;
    }
    .selected-indicator.show{opacity:1}
    
    /* Panel & Controls */
    .panel{
      border:1px solid var(--stroke);
      border-radius:var(--radius-xl);
      background:var(--panel);
      box-shadow:var(--shadow2);
      height:100%;
      transition:all .3s;
    }
    .panel .hd{
      padding:18px;
      border-bottom:1px solid var(--stroke);
      background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);
    }
    [data-theme="dark"] .panel .hd{
      background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)
    }
    .panel .hd h2{
      margin:0;
      font-family:Fraunces,serif;
      font-weight:650;
      font-size:1.1rem;
      color:var(--text);
    }
    .panel .hd p{
      margin:4px 0 0;
      color:var(--muted);
      font-size:.875rem;
    }
    .panel .bd{padding:16px}
    .controls{display:grid;gap:12px}
    .ctrl{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
      padding:12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,.8);
      transition:all .3s;
    }
    [data-theme="dark"] .ctrl{background:rgba(0,0,0,.18)}
    .ctrl label{display:flex;flex-direction:column;gap:4px}
    .ctrl label span:first-child{
      font-size:.8125rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--text);
      font-weight:600;
    }
    .ctrl label span:last-child{
      font-size:.8125rem;
      color:var(--muted);
    }
    input[type="range"]{
      width:160px;
      accent-color:var(--accent2);
      cursor:pointer;
    }
    .surface-value{
      font-weight:700;
      color:var(--accent2);
      font-size:.875rem;
      min-width:55px;
      text-align:right;
    }
    .btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
    button{
      appearance:none;
      border:1px solid var(--stroke2);
      color:var(--text);
      background:linear-gradient(180deg,#fff,rgba(240,242,245,.9));
      padding:8px 12px;
      border-radius:12px;
      cursor:pointer;
      font-weight:600;
      font-size:.8125rem;
      transition:all .15s;
      box-shadow:0 4px 12px rgba(0,20,40,.08);
    }
    [data-theme="dark"] button{
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.14))
    }
    button:hover{transform:translateY(-1px);border-color:var(--accent2)}
    button:active{transform:scale(.98)}
    button.secondary:hover{border-color:var(--accent)}
    button.secondary.active{
      border-color:var(--accent);
      background:rgba(184,149,42,.1);
      box-shadow:0 0 0 2px rgba(184,149,42,.15) inset;
    }
    .theme-toggle,.view-toggle,.cut-toggle{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background:var(--panel);
      color:var(--text);
      font-size:.8125rem;
      font-weight:600;
      cursor:pointer;
      transition:all .2s;
    }
    .theme-toggle:hover,.view-toggle:hover,.cut-toggle:hover{
      transform:translateY(-1px);
      border-color:var(--accent2);
    }
    .cut-toggle.active{
      border-color:var(--accent);
      background:rgba(184,149,42,.1);
    }
    
    /* Info panel for selected item */
    .info-panel{
      margin-top:12px;
      padding:12px;
      border-radius:14px;
      border:1px solid var(--accent);
      background:rgba(13,148,136,.05);
      display:none;
    }
    .info-panel.show{display:block}
    .info-panel h4{
      font-size:14px;
      font-weight:700;
      margin:0 0 4px;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .info-panel p{
      font-size:12px;
      color:var(--muted);
      margin:0;
    }
    .info-panel .info-dims{
      color:var(--accent2);
      font-weight:600;
    }
    
    .text-primary1 {color: #09db5d !important;}
    #scaleRead{font-size:.875rem;color:var(--muted);margin-left:8px}
    .reveal{
      opacity:0;
      transform:translateY(10px);
      transition:opacity .6s,transform .6s;
    }
    .reveal.in{opacity:1;transform:translateY(0)}
    .delay1{transition-delay:.05s} 
    .delay2{transition-delay:.12s}
    
    /* Accessibilité : focus visible */
    .clickable-zone:focus,
    button:focus,
    .theme-toggle:focus,
    .cut-toggle:focus {
      outline: 2px solid var(--accent2);
      outline-offset: 2px;
    }
    .clickable-zone:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    .theme-toggle:focus:not(:focus-visible),
    .cut-toggle:focus:not(:focus-visible) {
      outline: none;
    }
    
    @media(max-width:768px){
      .ctrl{grid-template-columns:1fr} 
      .surface-value{text-align:left}
      input[type="range"]{width:100%} 
      .btnrow{justify-content:center}
      .plan-tooltip{max-width:220px;font-size:12px}
    }
    @media print{
      .btnrow,input[type="range"],.theme-toggle,.view-toggle,.cut-toggle,.plan-tooltip,.selected-indicator,.info-panel{display:none!important}
      .svgBox{transform:none!important;box-shadow:none}
    }