/* ===== Atelier de Dessin — feuille de style ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* Sombre Carthage (ex-"bois") */
  --wood-0:#0b0b0d;
  --wood-1:#141418;
  --wood-2:#1a1a1f;
  --wood-3:#26262d;
  --wood-edge:#000000;
  /* Or Carthage (ex-"laiton") */
  --brass:#c9a961;
  --brass-deep:#9c7a35;
  --brass-light:#e6c989;
  /* Surfaces sombres (ex-"papier") */
  --paper:#17171c;
  --paper-deep:#101014;
  --mat:#1d1d23;
  /* Texte clair (ex-"encre") */
  --ink:#ece8df;
  --ink-soft:#a59f92;
  --cream:#f3efe6;
  /* Accents Carthage (or + vert Menthys) */
  --terra:#c9a961;
  --terra-deep:#9c7a35;
  --sage:#15803D;

  --rail-w:78px;
  --panel-w:312px;

  --sans:'Bricolage Grotesque', system-ui, sans-serif;
  --hand:'Caveat', cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  color:var(--cream);
  overflow:hidden;
  background:var(--wood-0);
  -webkit-font-smoothing:antialiased;
}

/* ---- Texture bois réutilisable ---- */
.wood{
  background-color:var(--wood-2);
  background-image:
    /* grain fin */
    repeating-linear-gradient(91deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(89deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px),
    /* veines larges */
    linear-gradient(96deg, var(--wood-1), var(--wood-3) 38%, var(--wood-2) 62%, var(--wood-1));
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);
}
.grain-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Top bar ===== */
.topbar{
  position:relative; z-index:5;
  height:62px; flex:0 0 62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px 0 16px;
  border-bottom:3px solid var(--wood-edge);
}
.brand{display:flex; align-items:center; gap:44px;}
.brand .mark{margin-right:2px;
  font-family:var(--hand); font-size:34px; font-weight:700; line-height:1;
  color:var(--brass-light);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.brand .sub{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
}
.top-actions{display:flex; align-items:center; gap:8px;}

/* Boutons laiton */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px;
  border-radius:9px; border:1px solid var(--wood-edge);
  background:linear-gradient(var(--wood-3),var(--wood-1));
  color:var(--cream); font-family:var(--sans); font-size:13.5px; font-weight:600;
  cursor:pointer; user-select:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 5px rgba(0,0,0,.35);
  transition:transform .05s ease, filter .15s ease;
}
.btn svg{width:17px; height:17px;}
.btn:hover{filter:brightness(1.12);}
.btn:active{transform:translateY(1px);}
.btn.icon{width:38px; padding:0; justify-content:center;}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:none;}
.btn.primary{
  background:linear-gradient(var(--terra),var(--terra-deep));
  border-color:#7a3119;
}
.btn.ghost{background:transparent; border-color:transparent; box-shadow:none;}
.btn.ghost:hover{background:rgba(0,0,0,.25);}
.divider{width:1px; height:30px; background:var(--wood-edge); margin:0 4px;}

/* ===== Layout studio ===== */
.studio{
  display:flex; height:calc(100% - 62px);
}

/* ---- Tool rail (gauche) ---- */
.toolrail{
  position:relative; z-index:4;
  width:var(--rail-w); flex:0 0 var(--rail-w);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 0;
  border-right:3px solid var(--wood-edge);
  overflow-y:auto;
}
.rail-label{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); opacity:.8; margin:2px 0 2px;
}
.tool{
  position:relative;
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.4);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  color:var(--cream); cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.tool svg{width:25px; height:25px;}
.tool:hover{transform:translateY(-1px); background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(0,0,0,.18));}
.tool[aria-pressed="true"]{
  background:linear-gradient(160deg,var(--brass-light),var(--brass-deep));
  color:var(--wood-0);
  box-shadow:0 0 0 2px var(--brass-deep), 0 4px 12px rgba(0,0,0,.4);
}
.tool[aria-pressed="true"] svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));}
.tool .tip{
  position:absolute; left:60px; top:50%; transform:translateY(-50%) scale(.9);
  background:var(--wood-1); color:var(--cream); font-size:12px; font-weight:600;
  padding:5px 9px; border-radius:7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:20;
}
.tool:hover .tip{opacity:1; transform:translateY(-50%) scale(1);}
.tool .tip::before{
  content:''; position:absolute; left:-5px; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color:var(--wood-1);
}

/* ===== Stage / chevalet ===== */
.stage{
  position:relative; flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding:34px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,240,210,.05), transparent 60%),
    var(--wood-0);
  overflow:hidden;
}
.stage::before{ /* lueur d'atelier */
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 50% 42%, rgba(255,228,170,.10), transparent 70%);
  pointer-events:none;
}
.easel{
  position:relative;
  max-width:100%; max-height:100%;
  padding:16px;
  border-radius:6px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px),
    linear-gradient(120deg, var(--wood-3), var(--wood-1));
  box-shadow:
    0 0 0 2px var(--wood-edge),
    0 26px 60px rgba(0,0,0,.55),
    0 6px 18px rgba(0,0,0,.4);
}
.easel::after{ /* liseré laiton intérieur */
  content:''; position:absolute; inset:9px; border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(205,165,82,.4);
  pointer-events:none;
}
.canvas-stack{
  position:relative;
  display:block;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 0 22px rgba(0,0,0,.25);
  /* taille calée par JS via aspect-ratio + max */
}
.canvas-stack canvas{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none;
}
#surface{cursor:none; z-index:999;}
#strokeCanvas{z-index:998; pointer-events:none;}

/* curseur pinceau réactif */
.brush-cursor{
  position:fixed; left:0; top:0; z-index:1500;
  width:0; height:0; pointer-events:none; display:none;
}
.cur-ring{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  border-radius:50%; box-sizing:border-box;
  border:1.6px solid rgba(20,12,4,.85);
  box-shadow:0 0 0 1px rgba(255,255,255,.7);
}
.cur-ico{
  position:absolute; left:0; top:0; width:38px; height:38px;
  transform:translate(11px,-46px); color:#241a10;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)) drop-shadow(0 0 1.5px rgba(0,0,0,.5));
}
.cur-ico svg{width:100%; height:100%;}

/* ===== Panneau palette (droite) ===== */
.palette-panel{
  position:relative; z-index:4;
  width:var(--panel-w); flex:0 0 var(--panel-w);
  border-left:3px solid var(--wood-edge);
  overflow-y:auto; overflow-x:hidden;
  padding:16px 16px 28px;
}
.palette-panel::-webkit-scrollbar{width:10px;}
.palette-panel::-webkit-scrollbar-thumb{background:var(--wood-1); border-radius:8px; border:2px solid var(--wood-2);}

.section{margin-bottom:20px;}
.section > h3{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.section > h3::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--wood-edge),transparent);}

/* carte crème (zone outils sur la palette) */
.card{
  background:linear-gradient(180deg, var(--mat), var(--paper-deep));
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--ink);
}

/* --- Sélecteur HSV --- */
.sv{
  position:relative; width:100%; height:150px; border-radius:8px;
  cursor:crosshair; touch-action:none;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    var(--hue,#ff0000);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.sv-thumb,.hue-thumb{
  position:absolute; pointer-events:none;
  border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.5);
}
.sv-thumb{width:16px; height:16px; transform:translate(-50%,-50%);}
.hue{
  position:relative; width:100%; height:16px; margin-top:10px; border-radius:8px;
  cursor:pointer; touch-action:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.hue-thumb{width:18px; height:18px; top:50%; transform:translate(-50%,-50%);}

.color-readout{display:flex; align-items:center; gap:9px; margin-top:11px;}
.swatch-current{
  width:34px; height:34px; border-radius:8px; flex:0 0 34px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.3);
  background-image:
    linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%),
    linear-gradient(45deg,#bbb 25%,#fff 25%,#fff 75%,#bbb 75%);
  background-size:10px 10px; background-position:0 0,5px 5px;
}
.swatch-current i{display:block; width:100%; height:100%; border-radius:8px;}
.hex-input{
  flex:1; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.32); color:var(--cream); font-family:var(--sans); font-weight:600;
  font-size:13px; padding:0 10px; text-transform:uppercase; min-width:0;
}
.hex-input:focus{outline:2px solid var(--terra); outline-offset:0;}

.swatches{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-top:11px;}
.swatches button{
  aspect-ratio:1; border-radius:6px; border:1px solid rgba(0,0,0,.22); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .08s ease;
}
.swatches button:hover{transform:scale(1.12);}

/* --- Aperçu du pinceau --- */
.tool-now{
  font-family:var(--hand); font-size:19px; font-weight:700; color:var(--ink);
  line-height:1; margin:0 0 9px 2px; display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.tool-now span{white-space:nowrap;}
.tool-now::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--terra); box-shadow:0 0 0 3px rgba(192,86,59,.22);
}
.brush-preview{
  width:100%; height:66px; display:block; border-radius:9px; margin-bottom:13px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), inset 0 2px 6px rgba(0,0,0,.12);
}

/* --- Photo de référence & grille --- */
.file-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:40px; border-radius:9px; cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.22); color:var(--cream);
  background:rgba(255,255,255,.05); font-weight:600; font-size:13.5px;
  transition:background .15s ease, border-color .15s ease;
}
.file-btn svg{width:18px; height:18px;}
.file-btn:hover{background:rgba(255,255,255,.1); border-color:var(--terra);}
.text-link{
  display:inline-block; margin-top:9px; background:none; border:none; cursor:pointer;
  color:var(--terra-deep); font-family:var(--sans); font-weight:600; font-size:12.5px;
  text-decoration:underline; padding:0;
}
.text-link:hover{color:var(--terra);}
.grid-label{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:14px 0 8px;}
.grid-opts{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.g-opt{
  height:34px; border-radius:8px; cursor:pointer; font-family:var(--sans);
  font-weight:600; font-size:13px; color:var(--cream);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  transition:transform .06s ease, background .15s ease;
}
.g-opt:hover{background:rgba(255,255,255,.12);}
.g-opt:active{transform:translateY(1px);}
.g-opt.sel{
  background:linear-gradient(var(--terra),var(--terra-deep)); color:#fff;
  border-color:var(--terra-deep);
}

/* --- Sliders (taille / opacité) --- */
.slider-row{margin-top:4px;}
.slider-row + .slider-row{margin-top:14px;}
.slider-row label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px;
}
.slider-row label b{color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.slider-row label{white-space:nowrap;}
input[type=range].r{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--wood-2),var(--brass));
  outline:none;
}
input[type=range].r::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--brass-light),var(--brass-deep));
  border:1px solid var(--wood-edge); cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
input[type=range].r::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:1px solid var(--wood-edge);
  background:radial-gradient(circle at 35% 30%,var(--brass-light),var(--brass-deep)); cursor:pointer;
}

/* --- Fond --- */
.bg-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.bg-row .paper-sw{
  width:30px; height:30px; border-radius:7px; cursor:pointer; border:1px solid rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .08s ease;
}
.bg-row .paper-sw:hover{transform:scale(1.1);}
.bg-row .paper-sw.sel{box-shadow:0 0 0 2px var(--terra), inset 0 1px 0 rgba(255,255,255,.4);}
.bg-custom{position:relative; width:30px; height:30px;}
.bg-custom input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.bg-custom .ring{
  width:30px; height:30px; border-radius:7px; pointer-events:none;
  background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow:inset 0 0 0 2px var(--mat); border:1px solid rgba(0,0,0,.25);
}

/* --- Calques --- */
.layers-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.layers-head .mini{display:flex; gap:6px;}
.mini-btn{
  width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--wood-edge); background:linear-gradient(var(--wood-3),var(--wood-1));
  color:var(--cream); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.mini-btn svg{width:15px; height:15px;}
.mini-btn:hover{filter:brightness(1.15);}
.mini-btn:disabled{opacity:.35; cursor:not-allowed;}
.layers{display:flex; flex-direction:column; gap:6px;}
.layer-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:10px;
  background:rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.3);
  cursor:pointer; transition:background .12s ease;
}
.layer-item:hover{background:rgba(0,0,0,.32);}
.layer-item.active{
  background:linear-gradient(90deg, rgba(192,86,59,.4), rgba(0,0,0,.22));
  border-color:var(--terra);
}
.layer-item .eye{
  width:26px; height:26px; flex:0 0 26px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.layer-item .eye svg{width:16px; height:16px;}
.layer-item.hidden-l{opacity:.5;}
.layer-thumb{
  width:42px; height:30px; flex:0 0 42px; border-radius:5px;
  background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  background-image:
    linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),
    linear-gradient(45deg,#ddd 25%,#fff 25%,#fff 75%,#ddd 75%);
  background-size:8px 8px; background-position:0 0,4px 4px;
  overflow:hidden;
}
.layer-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.layer-name{flex:1; font-size:13px; font-weight:600; color:var(--cream); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:26px; transform:transl(-50%) translateY(20px);
  transform:translateX(-50%) translateY(20px);
  background:var(--wood-1); color:var(--cream); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:11px; display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.5); border:1px solid var(--brass-deep);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:2000;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .dot{width:9px; height:9px; border-radius:50%; background:var(--sage);}

@media (max-width:1080px){
  :root{--panel-w:280px;}
}