:root{
    --bg:#0f1115;
    --panel:#171a21;
    --muted:#8b93a3;
    --text:#e6e8ee;
    --accent:#4cc2ff;
    --accent-2:#9bff7a;
    --btn:#2a2f3a;
    --btn-hover:#3a4150;
    --primary:#2b7fff;
    --danger:#ff5b6e;

    /* Layout */
    --editor-aspect: 16/9;
    --reserved-h: 276px;     /* topbar + toolbar + bouton bas */
    --sidebar-w: 380px;      /* largeur panneau calques */
}

*{box-sizing:border-box}
html, body{
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
}
body{
    margin:0;
    font-family: Inter, Arial, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#0d0f14, #141821 40%, #0d0f14);
}

/* Topbar */
.topbar{
    display:flex; gap:12px; align-items:center; justify-content:space-between;
    padding:14px 16px; background:var(--panel); border-bottom:1px solid #202637;
}
.topbar h1{font-size:18px; margin:0; color:#eaf2ff}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{
    background:var(--btn); color:var(--text); border:1px solid #2c3342;
    padding:8px 12px; border-radius:8px; cursor:pointer;
}
.btn:hover{background:var(--btn-hover)}
.btn.primary{background:var(--primary); border-color:#2b7fff; color:white}
.btn.toggle[aria-pressed="true"]{outline:2px solid #4cc2ff; background:#2a3550}

/* Toolbar */
.toolbar{
    display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    background:#131723; border-bottom:1px solid #202637; padding:10px 16px;
}
.toolbar .group{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.toolbar label{display:flex; gap:6px; align-items:center; color:#8b93a3; font-size:14px}
.toolbar input[type="range"]{width:160px}

/* Workspace */
.workspace{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap: 12px;
    padding:12px 12px 0;
}
.editor-wrap{
    display:flex; justify-content:center; padding:0;
    max-width: calc(100vw - var(--sidebar-w) - 24px);
    flex: 1 1 auto;
}
.editor{
    position:relative;
    width: min(
        calc(100vw - var(--sidebar-w) - 24px),
        calc((100vh - var(--reserved-h)) * 1.7777777778)
    );
    max-width: 1200px;
    aspect-ratio: var(--editor-aspect);
    background:#0a0c11;
    border:2px dashed #2d3547;
    border-radius:12px;
    overflow:hidden;
    touch-action:none;
}

/* Image de fond */
#backgroundImage{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;
    background:#0d1018;
    user-select:none;
    pointer-events:none;
}

/* Racine des calques */
#overlayRoot{
    position:absolute; inset:0;
}

/* Calque texte */
.text{
    position:absolute;
    display:inline-block;
    min-width:60px;
    min-height:40px;
    padding:4px 8px;
    color:#fff;
    font-size:48px;
    line-height:1.2;
    text-align:center;
    text-shadow:2px 2px 6px rgba(0,0,0,.7);
    user-select:none;
    cursor:grab;
    will-change:transform, left, top;
    border:1px dashed transparent;
    border-radius:6px;

    white-space: pre; /* pas de wrap auto */
    word-break: normal;
    overflow-wrap: normal;
    max-width: none;

    touch-action: none; /* capture pinch/rotate */
}
.text.active{ border-color:#3b82f6; }
.text.dragging{cursor:grabbing}

/* Calque image — largeur sur le CONTENEUR, l'image fait width:100% */
.img-layer{
    position:absolute;
    display:block;
    cursor:grab;
    user-select:none;
    border:1px dashed transparent;
    border-radius:8px;
    touch-action: none;
    will-change: transform, left, top, width;
    /* width est piloté en JS (wPct%) */
}
.img-layer.active{ border-color:#3b82f6; }
.img-layer.dragging{cursor:grabbing}
.img-layer img{
    display:block;
    width: 100%;
    height:auto;
    max-width:none;
    pointer-events:none;
    user-select:none;
}

/* Guides */
.guide{
    position:absolute; pointer-events:none; opacity:.35; display:none;
}
.editor.show-guides .guide{display:block}
.guide-h{left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg, transparent, #4cc2ff, transparent)}
.guide-v{top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg, transparent, #4cc2ff, transparent)}

/* Panneau calques */
.side-panel{
    width: var(--sidebar-w);
    background: #121621;
    border:1px solid #202637;
    border-radius:12px;
    padding:10px;
}
.side-panel-head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.side-panel h2{font-size:16px; margin:0}
.side-panel .head-actions{display:flex; gap:8px}

.layers-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:8px;
}
.layer-item{
    display:flex; align-items:center; justify-content:space-between;
    background:#0f1421;
    border:1px solid #263049;
    border-radius:8px;
    padding:8px;
    gap:8px;
}
.layer-item .name{flex:1 1 auto; font-size:14px; color:#e7ecf7;}
.layer-item .controls{display:flex; gap:6px;}
.layer-item button{
    background:#1b2232; color:#e7ecf7; border:1px solid #2a3550; padding:6px 8px;
    border-radius:6px; cursor:pointer;
}
.layer-item.active{ outline:2px solid #3b82f6; }
.layer-item .btn-del{ background:#2a1b23; border-color:#4a2630; color:#ffbac7; }

/* Bouton capture de fond */
.bottom-capture{
  display:flex; justify-content:center; align-items:center; padding: 12px 0 16px;
}
.camera-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 104px; height: 104px; border-radius: 9999px;
  border: 2px solid #2b7fff; background: var(--primary); color: white;
  font-size: 44px; line-height: 1; cursor: pointer;
  box-shadow: 0 12px 30px rgba(43,127,255,0.35), inset 0 0 0 2px rgba(255,255,255,0.08);
  transition: transform 80ms ease, filter 120ms ease;
}
.camera-btn:hover{ filter: brightness(1.05); }
.camera-btn:active{ transform: translateY(1px) scale(0.99); }

/* Modales clavier */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:50;}
.modal.hidden{display:none}
.modal-content{ width:min(900px, 96vw); background:var(--panel); border:1px solid #2b3244; border-radius:12px; padding:12px; box-shadow:0 10px 40px rgba(0,0,0,.5);}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
#kbdTextarea{ width:100%; min-height:120px; background:#0c1018; color:#fff; border:1px solid #263049; border-radius:8px; padding:10px; font-size:18px; resize:vertical;}
.keyboard{margin-top:10px; display:grid; gap:6px}
.row{display:flex; gap:6px; justify-content:center}
.key{ background:#1b2232; color:#e7ecf7; border:1px solid #2a3550; padding:12px 14px; border-radius:8px; min-width:44px; text-align:center; cursor:pointer; user-select:none;}
.key.wide{min-width:88px}
.key.space{min-width:240px}
.key.fn{background:#24304a}
.key:active{transform:translateY(1px)}
.key.toggled{outline:2px solid var(--accent)}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}

/* Petits écrans */
@media (max-width: 640px){
    .toolbar{gap:8px}
    #fontSize{width:120px}
    .key.space{min-width:160px}
}