*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#252525; --border:#333; --text:#f0f0f0; --muted:#929292;
  --accent:#ff4500; --accent-h:#ff6030; --gold:#ffd635; --green:#00a368; --blue:#3690ea;
  --radius:8px; --radius-lg:14px; --header-h:56px; --toolbar-w:176px;
}
html, body { height:100%; background:var(--bg); color:var(--text); font-family:'Syne', Arial, sans-serif; overflow:hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
#header { position:fixed; top:0; left:0; right:0; z-index:100; min-height:var(--header-h); background:rgba(26,26,26,.96); border-bottom:1px solid var(--border); backdrop-filter:blur(10px); }
.header-inner { width:100%; min-height:var(--header-h); padding:8px clamp(10px, 2vw, 20px); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { display:flex; align-items:center; gap:8px; font-size:clamp(.95rem, 2vw, 1.15rem); font-weight:800; letter-spacing:-.5px; white-space:nowrap; }
.logo-icon { font-size:1.2rem; }
.header-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.btn-login, .btn-buy { border:0; border-radius:var(--radius); padding:7px 12px; font-family:'Syne', Arial, sans-serif; font-size:.82rem; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s, transform .1s, border-color .15s; white-space:nowrap; }
.btn-login { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-login:hover { background:#333; }
.btn-signup { border-color:rgba(255,214,53,.6); color:var(--gold); }
.btn-buy { background:var(--accent); color:#fff; }
.btn-buy:hover { background:var(--accent-h); }
.btn-login:active, .btn-buy:active { transform:scale(.97); }
.credit-display { display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); padding:5px 10px; border-radius:99px; font-family:'Space Mono', monospace; font-size:.82rem; }
.credit-display.low { border-color:var(--accent); }
.credit-icon { color:var(--gold); }
.credit-label { color:var(--muted); font-size:.72rem; }
#credit-count { font-weight:700; min-width:18px; text-align:center; }
#main { height:100vh; padding-top:var(--header-h); padding-right:var(--toolbar-w); }
#canvas-container { height:calc(100vh - var(--header-h)); width:100%; overflow:auto; background:repeating-conic-gradient(#1c1c1c 0% 25%, #161616 0% 50%) 0 0 / 20px 20px; cursor:crosshair; overscroll-behavior:contain; }
#pixel-canvas { display:block; image-rendering:pixelated; image-rendering:crisp-edges; cursor:crosshair; }
#toolbar { position:fixed; top:var(--header-h); right:0; bottom:0; z-index:90; width:var(--toolbar-w); background:rgba(26,26,26,.98); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow:-8px 0 24px rgba(0,0,0,.25); }
.toolbar-toggle { display:none; position:sticky; top:0; z-index:3; width:100%; min-height:34px; background:var(--accent); color:#fff; border:0; border-bottom:1px solid rgba(255,255,255,.18); font-size:1.45rem; font-weight:900; cursor:pointer; line-height:1; }
.toolbar-toggle:active { transform:scale(.98); }
.tool-section { padding:11px 13px; border-bottom:1px solid var(--border); }
.tool-section:last-child { border-bottom:0; }
.tool-title { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.58rem; }
#palette { display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; }
.swatch { width:100%; aspect-ratio:1/1; min-height:28px; border-radius:7px; cursor:pointer; border:2px solid rgba(255,255,255,.08); transition:transform .1s, border-color .1s, box-shadow .1s; }
.swatch:hover { transform:scale(1.08); }
.swatch.active { border-color:#fff; transform:scale(1.06); box-shadow:0 0 0 2px rgba(0,0,0,.9), 0 0 0 4px rgba(255,255,255,.25); }
.zoom-row { display:flex; align-items:center; gap:8px; }
.zoom-btn { width:32px; height:32px; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius); font-size:1.25rem; line-height:1; cursor:pointer; }
.zoom-btn:hover { background:#333; }
#zoom-val { font-family:'Space Mono', monospace; font-size:.82rem; min-width:34px; text-align:center; }
.tool-actions { display:grid; gap:8px; }
.btn-undo { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:8px 6px; font-family:'Syne', Arial, sans-serif; font-size:.78rem; font-weight:700; cursor:pointer; }
.btn-undo:hover { background:#333; }
.mono { font-family:'Space Mono', monospace; font-size:.74rem; color:var(--muted); }
.cost-note { font-size:.72rem; color:var(--muted); line-height:1.5; }
.cost-note strong { color:var(--gold); }
.overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(3px); }
.overlay.hidden { display:none; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.7rem; width:90%; max-width:560px; position:relative; max-height:92vh; overflow:auto; }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:0; color:var(--muted); font-size:1rem; cursor:pointer; padding:4px 8px; border-radius:4px; }
.modal-close:hover { background:var(--surface2); color:var(--text); }
.cookie-banner { position:fixed; left:16px; right:calc(var(--toolbar-w) + 16px); bottom:16px; z-index:210; background:rgba(18,18,18,.96); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,.55); backdrop-filter:blur(10px); }
.cookie-banner.hidden { display:none; }
.cookie-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cookie-text { flex:1; min-width:230px; }
.cookie-text strong { display:block; margin-bottom:5px; font-size:1rem; }
.cookie-text p { color:#ccc; font-size:.86rem; line-height:1.45; margin-bottom:5px; }
.cookie-link { color:#8fd3ff; font-size:.85rem; font-weight:700; text-decoration:none; }
.cookie-link:hover { text-decoration:underline; }
.cookie-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-cookie { border:0; border-radius:10px; padding:10px 14px; font-family:'Syne', Arial, sans-serif; font-size:.82rem; font-weight:800; cursor:pointer; white-space:nowrap; }
.btn-cookie-accept { background:var(--accent); color:#fff; }
.btn-cookie-accept:hover { background:var(--accent-h); }
.btn-cookie-refuse { background:transparent; color:#aaa; border:1px solid rgba(255,255,255,.18); }
.btn-cookie-refuse:hover { background:rgba(255,255,255,.07); color:#fff; }
.btn-cookie-custom { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.cookie-prefs-title { font-size:1.3rem; margin-bottom:1.1rem; padding-right:2rem; }
.pref-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); }
.pref-info { flex:1; }
.pref-info strong { display:block; margin-bottom:4px; font-size:.95rem; }
.pref-info p { color:#aaa; font-size:.82rem; line-height:1.45; }
.pref-toggle.always-on { font-size:.75rem; font-weight:700; color:#00c77a; white-space:nowrap; padding:4px 10px; border:1px solid #00c77a44; border-radius:99px; }
.pref-actions { margin-top:1.3rem; display:flex; justify-content:flex-end; }
.toggle-switch { position:relative; width:52px; height:28px; flex:0 0 auto; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; cursor:pointer; background:#444; border-radius:99px; transition:.2s; }
.toggle-slider::before { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(24px); }
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:300; background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:10px 22px; font-size:.85rem; max-width:min(92vw, 620px); box-shadow:0 4px 20px rgba(0,0,0,.5); }
.toast.hidden { display:none; }
.toast.success { border-color:var(--green); color:#7eed56; }
.toast.error { border-color:var(--accent); color:#ff8060; }
.toast.info { border-color:var(--blue); color:#51e9f4; }
.legal-body { overflow:auto; min-height:100%; }
.legal-main { padding:calc(var(--header-h) + 28px) 16px 40px; min-height:100vh; background:radial-gradient(circle at top, rgba(255,69,0,.13), transparent 34%), var(--bg); }
.legal-card { width:min(980px, 100%); margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:clamp(20px, 4vw, 42px); line-height:1.65; }
.legal-card h1 { font-size:clamp(1.6rem, 4vw, 2.6rem); margin-bottom:16px; }
.legal-card h2 { margin:26px 0 8px; color:var(--gold); }
.legal-card p, .legal-card li { color:#ddd; }
.legal-card ul { padding-left:22px; }
.legal-intro { color:#fff; font-size:1.05rem; }
.rgpd-date { margin-top:28px; color:var(--muted) !important; }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
@media (max-width: 900px) {
  :root { --toolbar-w:152px; --header-h:64px; }
  .btn-login, .btn-buy { padding:6px 9px; font-size:.76rem; }
  .btn-signup { display:none; }
  .credit-label { display:none; }
  #palette { grid-template-columns:repeat(3, 1fr); gap:6px; }
  .swatch { min-height:30px; }
  .info-section { display:none; }
}
@media (max-width: 680px) {
  html, body { overflow:hidden; }
  :root { --header-h:96px; --toolbar-w:86px; }
  .header-inner { align-items:flex-start; flex-direction:column; gap:8px; }
  .header-right { width:100%; justify-content:flex-start; gap:6px; }
  .logo-text { font-size:1rem; }
  #main { padding-top:var(--header-h); padding-right:var(--toolbar-w); padding-bottom:0; }
  #canvas-container { height:calc(100vh - var(--header-h)); width:100%; }
  #toolbar {
    top:var(--header-h);
    left:auto;
    right:0;
    bottom:0;
    width:var(--toolbar-w);
    height:auto;
    border-left:1px solid var(--border);
    border-top:0;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    box-shadow:-8px 0 24px rgba(0,0,0,.32);
  }

  .toolbar-toggle { display:block; position:sticky; top:0; margin:-7px -6px 6px; width:calc(100% + 12px); border-radius:0; }
  #toolbar.collapsed { width:42px; overflow:hidden; padding-left:0; padding-right:0; }
  #toolbar.collapsed .tool-section { display:none; }
  #toolbar.collapsed .toolbar-toggle { margin:-7px 0 0; width:42px; min-height:58px; writing-mode:vertical-rl; }
  body:has(#toolbar.collapsed) #main { padding-right:42px; }
  body:has(#toolbar.collapsed) .cookie-banner { right:52px; }
  body:has(#toolbar.collapsed) .toast { left:calc((100vw - 42px) / 2); max-width:calc(100vw - 42px - 24px); }
  .tool-section { border-right:0; border-bottom:1px solid var(--border); padding:8px 5px; flex:0 0 auto; }
  .tool-title { font-size:.56rem; text-align:center; margin-bottom:.45rem; }
  .palette-section { width:100%; order:-10; }
  #palette { grid-template-columns:repeat(2, 1fr); gap:6px; }
  .swatch { min-height:32px; border-radius:7px; }
  .compact-section { min-width:0; width:100%; }
  .zoom-row { justify-content:center; gap:4px; flex-wrap:wrap; }
  .zoom-btn { width:30px; height:30px; }
  #zoom-val { width:100%; order:-1; font-size:.72rem; }
  .tool-actions { display:none; }
  .status-section { display:none; }
  .info-section { display:none; }
  .cookie-banner { left:10px; right:calc(var(--toolbar-w) + 10px); bottom:10px; max-height:42vh; overflow:auto; }
  .toast { bottom:18px; left:calc((100vw - var(--toolbar-w)) / 2); max-width:calc(100vw - var(--toolbar-w) - 24px); }
}
@media (max-width: 420px) {
  :root { --header-h:104px; --toolbar-w:86px; }
  .btn-login.menu-link { display:none; }
  .btn-buy { padding-inline:10px; }
  .credit-display { padding-inline:8px; }
  #palette { gap:5px; }
  .swatch { min-height:30px; }
  .cookie-actions { width:100%; }
  .btn-cookie { flex:1; padding-inline:8px; }
}

/* Palette mobile indépendante et déplaçable */
.toolbar-drag { display:none; }
@media (max-width: 680px) {
  #toolbar {
    top:calc(var(--header-h) + 8px);
    bottom:auto;
    height:auto;
    max-height:calc(100vh - var(--header-h) - 18px);
    border:1px solid var(--border);
    border-right:0;
    border-radius:14px 0 0 14px;
    overflow-y:auto;
    touch-action:none;
    transition:width .18s ease, box-shadow .18s ease;
  }
  #toolbar.dragging { box-shadow:-12px 0 30px rgba(255,69,0,.22), -8px 0 24px rgba(0,0,0,.32); }
  .toolbar-toggle {
    position:relative;
    top:auto;
    margin:-7px -6px 0;
    width:calc(100% + 12px);
    border-radius:14px 0 0 0;
  }
  .toolbar-drag {
    display:block;
    width:calc(100% + 12px);
    margin:0 -6px 6px;
    min-height:36px;
    border:0;
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid var(--border);
    background:#242424;
    color:#fff;
    font-family:'Syne', Arial, sans-serif;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.04em;
    cursor:grab;
    touch-action:none;
  }
  .toolbar-drag:active { cursor:grabbing; background:#303030; }
  #toolbar.collapsed .toolbar-drag { display:none; }
  #toolbar.collapsed .toolbar-toggle { border-radius:14px 0 0 14px; }
}


/* Fenêtre achat PayPal */
body.modal-open { overflow:hidden; }
.shop-modal { max-width:520px; }
.shop-title { font-size:1.45rem; margin-bottom:6px; }
.shop-subtitle { color:#bbb; font-size:.92rem; margin-bottom:14px; line-height:1.45; }
.credit-packs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:14px; }
.pack-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:14px; padding:12px; cursor:pointer; text-align:left; font-family:'Syne', Arial, sans-serif; transition:.16s ease; }
.pack-btn strong { display:block; font-size:.94rem; margin-bottom:5px; }
.pack-btn span { color:var(--gold); font-family:'Space Mono', monospace; font-size:.82rem; }
.pack-btn:hover, .pack-btn.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,69,0,.22); transform:translateY(-1px); }
.selected-pack { background:#101010; border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:.86rem; margin-bottom:12px; color:#ddd; }
.selected-pack strong { color:#fff; }
.paypal-button-container { min-height:84px; background:#fff; border-radius:12px; padding:10px; overflow:hidden; }
.paypal-placeholder { background:#f5f5f5; border:1px dashed #999; border-radius:10px; color:#222; min-height:62px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; padding:10px; font-family:Arial, sans-serif; }
.paypal-warning { background:rgba(255,214,53,.12); border:1px solid rgba(255,214,53,.45); color:#ffe889; border-radius:12px; padding:10px 12px; font-size:.82rem; line-height:1.45; margin-bottom:12px; }
.paypal-warning.hidden { display:none; }
.paypal-note { color:#aaa; font-size:.78rem; margin-top:10px; line-height:1.45; }
@media (max-width: 680px) {
  .shop-modal { width:calc(100vw - 22px); max-height:calc(100vh - 22px); padding:1rem; }
  .shop-title { font-size:1.18rem; padding-right:28px; }
  .shop-subtitle { font-size:.82rem; }
  .credit-packs { grid-template-columns:1fr; gap:8px; }
  .pack-btn { padding:10px; }
  .paypal-button-container { min-height:72px; padding:8px; }
}


.is-hidden { display:none !important; }
.user-chip { display:flex; align-items:center; gap:6px; background:rgba(255,214,53,.1); border:1px solid rgba(255,214,53,.35); color:var(--gold); border-radius:99px; padding:6px 10px; font-size:.78rem; font-weight:800; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-modal h2 { font-size:1.45rem; margin-bottom:8px; padding-right:34px; }
.auth-subtitle { color:#bbb; font-size:.9rem; line-height:1.45; margin-bottom:16px; }
.auth-form { display:grid; gap:12px; }
.auth-form label { display:grid; gap:6px; color:#ddd; font-size:.84rem; font-weight:800; }
.auth-form input { width:100%; background:#111; color:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 12px; font-family:'Space Mono', monospace; outline:none; }
.auth-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,69,0,.16); }
.btn-auth-submit { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:12px 14px; font-family:'Syne', Arial, sans-serif; font-weight:900; cursor:pointer; }
.btn-auth-submit:hover { background:var(--accent-h); }
.auth-switch { margin-top:12px; width:100%; background:transparent; color:#8fd3ff; border:1px solid rgba(143,211,255,.25); border-radius:10px; padding:10px; font-weight:800; cursor:pointer; }
.auth-switch:hover { background:rgba(143,211,255,.08); }
@media (max-width: 680px) {
  .user-chip { max-width:110px; padding:5px 8px; font-size:.72rem; }
  .auth-modal { width:min(94vw, 420px); padding:1.25rem; }
}