/* Create Modal — compact + responsive (v5) */
:root{
  --bg:#0c0c10; --panel:#14151b; --text:#e8eaed; --muted:#9aa0a6;
  --accent:#5b6cff; --border:rgba(255,255,255,.08);
  --sidew:360px; --topbar:#000;
}

/* Overlay */
.cr-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);}
.cr-overlay[hidden]{display:none}

/* Modal */
.cr-modal{width:min(1100px,96vw);height:min(90vh,96vh);display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#15161b 0%,#0f1015 100%);box-shadow:0 24px 80px rgba(0,0,0,.6)}

/* Top black bar */
.cr-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--topbar);color:#fff;padding:12px 16px}
.cr-title{font-weight:800;font-size:16px;line-height:1}
.cr-actions-head{display:flex;align-items:center;gap:8px}
.cr-back{background:transparent;border:0;color:#fff;padding:4px 6px;border-radius:10px;font-size:18px}
.cr-close{background:#1b1e2c;border:0;color:#fff;border-radius:10px;padding:6px 10px;font-weight:800}
.cr-next{color:#fff;background:var(--accent);border:0;border-radius:10px;padding:8px 12px;font-weight:800}
.cr-next:disabled{opacity:.45;cursor:not-allowed}

/* Progress line just under header */
.cr-progline{height:3px;background:transparent}
.cr-progbar{height:100%;width:0%;
  background:linear-gradient(90deg,#6ff,#6f6,#ff6,#f6f,#6bf,#6ff);
  transition:width .18s ease}

/* Body grid */
.cr-body{display:grid;grid-template-columns:1fr var(--sidew);min-height:0;flex:1}
.cr-body.no-side{grid-template-columns:1fr} /* <-- quand le panneau droit est caché */
.cr-stage{position:relative;min-height:0;display:flex;flex-direction:column}

/* Canvas zone */
.cr-canvas-wrap{position:relative;flex:1;display:grid;place-items:center;min-height:320px;
  overflow:hidden;background:#0a0b0f}
.cr-canvas-wrap img,.cr-canvas-wrap video{width:100%;height:100%;object-fit:contain;transform-origin:center}
.cr-canvas-wrap[data-crop="true"] img,
.cr-canvas-wrap[data-crop="true"] video{object-fit:cover}
.vignette-layer{position:absolute;inset:0;pointer-events:none}

/* ---- Screen 1 : Drop ---- */
.cr-drop{margin:auto;text-align:center;background:#1a1c25;border:1px dashed var(--border);
  border-radius:14px;width:min(600px,92%);padding:48px 28px}
.cr-drop-ic{width:80px;height:80px;display:grid;place-items:center;margin:0 auto 18px;color:#eef}
.cr-drop-ic svg{width:68px;height:68px}
.cr-drop-t1{color:#fff;font-weight:800;font-size:20px;margin-bottom:14px}
.cr-btn{background:#3c40ff;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}

/* Right side (visible uniquement pendant effects/details) */
.cr-side{border-left:1px solid var(--border);background:rgba(0,0,0,.08);overflow:auto}
.cr-side[hidden]{display:none}
.cr-side-pane{padding:12px;min-height:100%}

/* Tabs (Filtres / Réglages) */
.cr-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:10px;position:sticky;top:0;background:#0f1015;z-index:1}
.cr-tabs .tab{background:transparent;border:0;color:#cfd3db;padding:10px 12px;border-radius:8px;font-weight:800}
.cr-tabs .tab.is-active{background:rgba(255,255,255,.08);color:#fff}

/* Filters grid */
.cr-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:10px}
@media (min-width:1050px){.cr-filter-grid{grid-template-columns:repeat(3,1fr)}}
.cr-fcard{background:#161821;border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.cr-fcard:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.cr-fthumb{width:100%;aspect-ratio:1/1;border-radius:8px;background:#0c0d12;display:block;background-size:cover;background-position:center}
.cr-fname{margin-top:8px;text-align:center;color:#cfd3db;font-size:.88rem;font-weight:700}
.cr-fcard.is-active{outline:2px solid var(--accent);outline-offset:0}

/* Réglages */
.cr-sliders{display:grid;gap:14px;padding-top:10px}
.cr-sl{display:grid;gap:8px}
.cr-sl label{color:#c9ccd1;font-size:.92rem;font-weight:700}
.cr-sliders input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:rgba(255,255,255,.22);border-radius:999px;outline:none;cursor:pointer}
.cr-sliders input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.cr-sliders input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px rgba(0,0,0,.25)}

/* Crop controls (floating bottom-left pills) */
.cr-crop-tools{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:center;z-index:5}
.cr-pill{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:14px;padding:8px 10px;color:#fff;display:flex;align-items:center;gap:8px}
.cr-pill button{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:#fff;padding:6px 8px;font-weight:700;cursor:pointer}
.cr-zoom-slider{display:flex;align-items:center;gap:8px}
.cr-zoom-slider input[type="range"]{width:160px}

/* Aspect menu */
.cr-aspect-menu{position:absolute;left:18px;top:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:14px;padding:10px;color:#fff;display:none;z-index:6}
.cr-aspect-menu.is-open{display:block}
.cr-aspect-menu .a-row{display:flex;align-items:center;gap:10px;padding:6px 4px}
.cr-aspect-menu .a-row input{width:16px;height:16px}

/* Details page (final) */
.cr-lab{display:grid;gap:8px;margin:10px 0;font-weight:700;color:#cfd3db}
textarea{min-height:140px;resize:vertical;background:#101015;border:1px solid var(--border);border-radius:10px;color:#fff;padding:10px;width:100%}
.cr-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.cr-btn.primary{background:var(--accent);border:0;color:#fff;font-weight:800;padding:10px 14px;border-radius:10px}

/* Visibility helpers */
#filtersGrid[hidden],#adjustPanel[hidden]{display:none!important}

/* No legacy spinner */
.cr-progress{display:none}

/* Mobile */
@media (max-width:900px){
  :root{--sidew:100%}
  .cr-modal{width:100vw;height:100vh;border-radius:0}
  .cr-body{grid-template-columns:1fr}
  .cr-side{border-left:0;border-top:1px solid var(--border)}
  .cr-drop{width:92vw}
}

/* Toujours cacher correctement les éléments [hidden] à l’intérieur du modal */
.cr-modal [hidden]{
  display: none !important;
  visibility: hidden !important;
}

/* Create Modal — compact + responsive (v5) */
:root{
  --bg:#0c0c10; --panel:#14151b; --text:#e8eaed; --muted:#9aa0a6;
  --accent:#5b6cff; --border:rgba(255,255,255,.08);
  --sidew:360px; --topbar:#000;
}

/* Overlay */
.cr-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);}
.cr-overlay[hidden]{display:none}

/* Modal */
.cr-modal{width:min(1100px,96vw);height:min(90vh,96vh);display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#15161b 0%,#0f1015 100%);box-shadow:0 24px 80px rgba(0,0,0,.6)}

/* Top black bar */
.cr-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--topbar);color:#fff;padding:12px 16px}
.cr-title{font-weight:800;font-size:16px;line-height:1}
.cr-actions-head{display:flex;align-items:center;gap:8px}
.cr-back{background:transparent;border:0;color:#fff;padding:4px 6px;border-radius:10px;font-size:18px}
.cr-close{background:#1b1e2c;border:0;color:#fff;border-radius:10px;padding:6px 10px;font-weight:800}
.cr-next{color:#fff;background:var(--accent);border:0;border-radius:10px;padding:8px 12px;font-weight:800}
.cr-next:disabled{opacity:.45;cursor:not-allowed}

/* Progress line just under header */
.cr-progline{height:3px;background:transparent}
.cr-progbar{height:100%;width:0%;
  background:linear-gradient(90deg,#6ff,#6f6,#ff6,#f6f,#6bf,#6ff);
  transition:width .18s ease}

/* Body grid */
.cr-body{display:grid;grid-template-columns:1fr var(--sidew);min-height:0;flex:1}
.cr-body.no-side{grid-template-columns:1fr}
.cr-stage{position:relative;min-height:0;display:flex;flex-direction:column}

/* Canvas zone */
.cr-canvas-wrap{position:relative;flex:1;display:grid;place-items:center;min-height:320px;
  overflow:hidden;background:#0a0b0f}
.cr-canvas-wrap img,.cr-canvas-wrap video{width:100%;height:100%;object-fit:contain;transform-origin:center}
.cr-canvas-wrap[data-crop="true"] img,
.cr-canvas-wrap[data-crop="true"] video{object-fit:cover}

/* Overlay for vignette + grain (no pointer events) */
.vignette-layer{
  position:absolute;inset:0;pointer-events:none;
  /* defaults for 2-layer stack: [grain, vignette] */
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-blend-mode: overlay, normal;
}

/* ---- Screen 1 : Drop ---- */
.cr-drop{margin:auto;text-align:center;background:#1a1c25;border:1px dashed var(--border);
  border-radius:14px;width:min(600px,92%);padding:48px 28px}
.cr-drop-ic{width:80px;height:80px;display:grid;place-items:center;margin:0 auto 18px;color:#eef}
.cr-drop-ic svg{width:68px;height:68px}
.cr-drop-t1{color:#fff;font-weight:800;font-size:20px;margin-bottom:14px}
.cr-btn{background:#3c40ff;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}

/* Right side (visible uniquement pendant effects/details) */
.cr-side{border-left:1px solid var(--border);background:rgba(0,0,0,.08);overflow:auto}
.cr-side[hidden]{display:none}
.cr-side-pane{padding:12px;min-height:100%}

/* Tabs (Filtres / Réglages) */
.cr-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:10px;position:sticky;top:0;background:#0f1015;z-index:1}
.cr-tabs .tab{background:transparent;border:0;color:#cfd3db;padding:10px 12px;border-radius:8px;font-weight:800}
.cr-tabs .tab.is-active{background:rgba(255,255,255,.08);color:#fff}

/* Filters grid */
.cr-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:10px}
@media (min-width:1050px){.cr-filter-grid{grid-template-columns:repeat(3,1fr)}}
.cr-fcard{background:#161821;border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.cr-fcard:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.cr-fthumb{width:100%;aspect-ratio:1/1;border-radius:8px;background:#0c0d12;display:block;background-size:cover;background-position:center}
.cr-fname{margin-top:8px;text-align:center;color:#cfd3db;font-size:.88rem;font-weight:700}
.cr-fcard.is-active{outline:2px solid var(--accent);outline-offset:0}

/* Réglages */
.cr-sliders{display:grid;gap:14px;padding-top:10px}
.cr-sl{display:grid;gap:8px}
.cr-sl label{color:#c9ccd1;font-size:.92rem;font-weight:700}
.cr-sliders input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:rgba(255,255,255,.22);border-radius:999px;outline:none;cursor:pointer}
.cr-sliders input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.cr-sliders input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px rgba(0,0,0,.25)}

/* Crop controls (floating bottom-left pills) */
.cr-crop-tools{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:center;z-index:5}
.cr-pill{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:14px;padding:8px 10px;color:#fff;display:flex;align-items:center;gap:8px}
.cr-pill button{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:#fff;padding:6px 8px;font-weight:700;cursor:pointer}
.cr-zoom-slider{display:flex;align-items:center;gap:8px}
.cr-zoom-slider input[type="range"]{width:160px}

/* Aspect menu */
.cr-aspect-menu{position:absolute;left:18px;top:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:14px;padding:10px;color:#fff;display:none;z-index:6}
.cr-aspect-menu.is-open{display:block}
.cr-aspect-menu .a-row{display:flex;align-items:center;gap:10px;padding:6px 4px}
.cr-aspect-menu .a-row input{width:16px;height:16px}

/* Details page (final) */
.cr-lab{display:grid;gap:8px;margin:10px 0;font-weight:700;color:#cfd3db}
textarea{min-height:140px;resize:vertical;background:#101015;border:1px solid var(--border);border-radius:10px;color:#fff;padding:10px;width:100%}
.cr-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.cr-btn.primary{background:var(--accent);border:0;color:#fff;font-weight:800;padding:10px 14px;border-radius:10px}

/* Visibility helpers */
#filtersGrid[hidden],#adjustPanel[hidden]{display:none!important}

/* No legacy spinner */
.cr-progress{display:none}

/* Mobile */
@media (max-width:900px){
  :root{--sidew:100%}
  .cr-modal{width:100vw;height:100vh;border-radius:0}
  .cr-body{grid-template-columns:1fr}
  .cr-side{border-left:0;border-top:1px solid var(--border)}
  .cr-drop{width:92vw}
}

/* Toujours cacher correctement les éléments [hidden] à l’intérieur du modal */
.cr-modal [hidden]{
  display: none !important;
  visibility: hidden !important;
}

/* Pendant le crop: on affiche à taille naturelle + centrage absolu
   => plus de blur dû à object-fit + transform */
.cr-canvas-wrap[data-crop="true"] img,
.cr-canvas-wrap[data-crop="true"] video{
  position:absolute;
  top:50%; left:50%;
  width:auto; height:auto;
  max-width:none; max-height:none;
  object-fit:unset;            /* évite le 1er redimensionnement */
  transform-origin:center;     /* on zoome proprement */
}