/* ============================================================
   Ciudadex admin — screen-specific components
   ============================================================ */

/* ---------- Login / Connexion ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login .pane-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--canvas)}
.login .formwrap{width:100%;max-width:380px}
.login .logo{font-family:var(--display);font-weight:700;font-size:30px;color:var(--clay);letter-spacing:-.02em}
.login .logo small{display:block;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.login h1{font-size:27px;margin:30px 0 6px}
.login .pane-art{position:relative;overflow:hidden;background:linear-gradient(160deg,#e9d7c2,#dcc4a8)}
.login .pane-art .ba{position:absolute;inset:0}
.login .pane-art .cap{position:absolute;left:0;right:0;bottom:0;padding:34px;color:#fff;
  background:linear-gradient(transparent,rgba(42,37,30,.78))}
.login .pane-art .cap h2{color:#fff;font-size:26px;max-width:380px;line-height:1.18}
.login .pane-art .cap p{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.82);max-width:360px}
.demo-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--ink-2);margin-top:22px}
.demo-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--sage)}

/* ---------- Guided wizard ---------- */
.wizard{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start}
.steps{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px}
.steps .step{display:flex;gap:13px;padding:11px 12px;border-radius:11px;cursor:pointer;transition:.12s}
.steps .step:hover{background:var(--surface-2)}
.steps .step.on{background:var(--surface);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.steps .num{width:25px;height:25px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:12.5px;background:var(--canvas-2);color:var(--ink-2);border:1px solid var(--line)}
.steps .step.on .num{background:var(--clay);color:#fff;border-color:var(--clay)}
.steps .step.done .num{background:var(--sage);color:#fff;border-color:var(--sage)}
.steps .st-t{font-weight:600;font-size:14px;line-height:1.15}
.steps .st-d{font-size:11.5px;color:var(--ink-3)}
.wizard .panel{max-width:560px}
.wizard-pane{display:none}
.wizard-pane.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.help-rail{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.help-rail h4{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.help-rail h4 svg{width:17px;height:17px;color:var(--clay)}
.help-rail p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 10px}
.help-rail ul{margin:0;padding-left:17px;font-size:13px;color:var(--ink-2);line-height:1.55}
.help-rail li{margin-bottom:5px}
.wizfoot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

/* rarity selector */
.rarity-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.rarity-opt{border:1.5px solid var(--line-2);border-radius:var(--r);padding:15px 14px;cursor:pointer;background:var(--surface);transition:.12s;text-align:left}
.rarity-opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.rarity-opt.on{border-color:var(--clay);background:var(--clay-tint)}
.rarity-opt .gem{width:13px;height:13px;border-radius:3px;transform:rotate(45deg);margin-bottom:10px}
.rarity-opt .rt{font-weight:700;font-size:14px}
.rarity-opt .rp{font-family:var(--display);font-size:22px;font-weight:600;margin-top:3px}
.rarity-opt .rd{font-size:11.5px;color:var(--ink-2);margin-top:4px;line-height:1.35}

/* map placeholder */
.map{position:relative;height:200px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  background:
   radial-gradient(circle at 30% 40%, #e7ddc8, transparent 60%),
   repeating-linear-gradient(0deg,transparent 0 31px,rgba(110,99,86,.07) 31px 32px),
   repeating-linear-gradient(90deg,transparent 0 31px,rgba(110,99,86,.07) 31px 32px),
   #efe6d6}
.map .road{position:absolute;background:#e3d6bf}
.map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--clay);filter:drop-shadow(0 4px 6px rgba(67,49,28,.25))}
.map .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--clay);
  background:rgba(194,107,67,.12);border-radius:50%;width:120px;height:120px}
.map .mtag{position:absolute;left:12px;bottom:12px;background:rgba(251,247,240,.9);border:1px solid var(--line);
  border-radius:8px;padding:5px 9px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}

/* reference photo dropzone */
.dropzone{border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;text-align:center;cursor:pointer;transition:.12s}
.dropzone:hover{border-color:var(--clay);background:var(--clay-tint)}
.dropzone .ico{width:46px;height:46px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--clay);box-shadow:var(--shadow-sm)}
.refpreview{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.refpreview img{display:block;width:100%}
.refpreview .ok{position:absolute;top:10px;right:10px;background:var(--sage);color:#fff;border-radius:20px;
  font-size:12px;font-weight:600;padding:4px 11px;display:flex;align-items:center;gap:5px;box-shadow:var(--shadow)}

/* ---------- Similarity gauge (moderation) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare .ph-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.compare .ph-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--canvas-2)}
.compare .ph-card .cap{padding:11px 15px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.compare .ph-card .cap span{color:var(--ink-3);font-weight:500;font-size:12px}

.gauge-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.gauge{position:relative;height:14px;border-radius:20px;margin:18px 0 6px;
  background:linear-gradient(90deg,var(--rose-tint),var(--amber-tint) 55%,var(--sage-tint));border:1px solid var(--line)}
.gauge .thresh{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--ink-2);border-radius:2px}
.gauge .thresh::after{content:'Seuil';position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.gauge .marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--sage);box-shadow:var(--shadow)}
.gauge-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.verdict{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.verdict .score{font-family:var(--display);font-weight:700;font-size:40px;line-height:1}
.verdict .vtext h3{font-size:18px}
.verdict .vtext p{font-size:13px;color:var(--ink-2);margin:2px 0 0}

.metarow{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.metarow:first-of-type{border-top:none}
.metarow .mk{color:var(--ink-2)}
.metarow .mv{font-weight:600}

/* moderation queue card */
.modq{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);align-items:center;box-shadow:var(--shadow-sm);transition:.12s;cursor:pointer}
.modq:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.modq .pair{display:flex;gap:3px;flex:none}
.modq .pair img{width:62px;height:62px;object-fit:cover;background:var(--canvas-2)}
.modq .pair img:first-child{border-radius:9px 0 0 9px}
.modq .pair img:last-child{border-radius:0 9px 9px 0}
.modq .qbody{flex:1;min-width:0}
.modq .qbody b{font-size:14.5px}
.modq .qbody .qm{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---------- Archive gallery (sales hook) ---------- */
.then-now{position:relative;border-radius:var(--r-xl);overflow:hidden;height:380px;box-shadow:var(--shadow);user-select:none;border:1px solid var(--line)}
.then-now .layer{position:absolute;inset:0}
.then-now .layer img{width:100%;height:100%;object-fit:cover;display:block}
.then-now .now{clip-path:inset(0 0 0 var(--split,50%))}
.then-now .then{filter:sepia(.5) contrast(.95) brightness(1.02)}
.then-now .handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:ew-resize}
.then-now .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow-lg);display:grid;place-items:center;color:var(--ink)}
.then-now input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.then-now .tag{position:absolute;top:16px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:rgba(42,37,30,.55);backdrop-filter:blur(4px);padding:5px 12px;border-radius:20px}
.then-now .tag.l{left:16px}
.then-now .tag.r{right:16px}

.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.arch{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);cursor:grab}
.arch .pic{aspect-ratio:4/3;position:relative}
.arch .pic .ph{position:absolute;inset:0;border:none;border-radius:0}
.arch .meta{padding:10px 12px}
.arch .yr{font-family:var(--display);font-weight:600;font-size:16px}
.arch .cr{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.arch .cap{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.arch .handle-d{position:absolute;top:8px;left:8px;background:rgba(251,247,240,.85);border-radius:6px;padding:2px 5px;color:var(--ink-3);display:flex}
.arch-add{border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--surface-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;color:var(--ink-2);cursor:pointer;min-height:160px;font-weight:600;font-size:13.5px;transition:.12s}
.arch-add:hover{border-color:var(--clay);background:var(--clay-tint);color:var(--clay-deep)}
.arch-add .ico{width:40px;height:40px;border-radius:11px;background:var(--surface);display:grid;place-items:center;color:var(--clay);box-shadow:var(--shadow-sm)}

/* ---------- Phone / field mode ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(42,37,30,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px;gap:40px}
.overlay.on{display:flex;animation:fade .2s}
.field-copy{max-width:330px;color:#fff}
.field-copy h2{color:#fff;font-size:26px;margin-bottom:12px}
.field-copy p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.field-copy .close{margin-top:8px}
.phone{width:340px;height:710px;background:#1c1813;border-radius:46px;padding:11px;box-shadow:var(--shadow-lg);position:relative;flex:none}
.phone .scr{width:100%;height:100%;background:var(--canvas);border-radius:36px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:120px;height:26px;background:#1c1813;border-radius:0 0 16px 16px;z-index:5}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 6px;font-size:13px;font-weight:600}
.fscreen{flex:1;display:none;flex-direction:column;overflow-y:auto}
.fscreen.on{display:flex}
.fhead{padding:6px 22px 10px}
.fhead .ft{font-family:var(--display);font-weight:600;font-size:22px}
.fhead .fs{font-size:13px;color:var(--ink-2);margin-top:3px}
.fbody{flex:1;padding:6px 22px}
.fnav{padding:16px 22px 26px;display:flex;flex-direction:column;gap:9px}
.fdot{display:flex;gap:6px;justify-content:center;padding:8px 0}
.fdot i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.fdot i.on{background:var(--clay);width:20px;border-radius:5px}
.fcam{aspect-ratio:3/4;border-radius:18px;background:repeating-linear-gradient(135deg,#2a2620 0 14px,#332e26 14px 28px);
  position:relative;display:grid;place-items:center;color:rgba(255,255,255,.5);overflow:hidden}
.fcam .frameguide{position:absolute;inset:24px;border:2px dashed rgba(255,255,255,.45);border-radius:10px}
.fcam .tip{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(28,24,19,.8);color:#fff;border-radius:10px;
  padding:9px 12px;font-size:12px;line-height:1.4}
.fmap{height:150px;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);position:relative;
  background:radial-gradient(circle at 50% 45%,#e7ddc8,transparent 60%),
   repeating-linear-gradient(0deg,transparent 0 23px,rgba(110,99,86,.08) 23px 24px),
   repeating-linear-gradient(90deg,transparent 0 23px,rgba(110,99,86,.08) 23px 24px),#efe6d6}
.fmap .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--clay)}
.fmini-label{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 7px}
.fcheck{width:74px;height:74px;border-radius:50%;background:var(--sage-tint);display:grid;place-items:center;margin:10px auto 16px;color:var(--sage)}

@media (max-width:1100px){
  .overlay{flex-direction:column;gap:16px;overflow:auto}
  .field-copy{max-width:340px;text-align:center}
  /* Narrow screens (large phones, landscape, tablets): KPI cards 2×2 and the
     two-column content grids (inline-styled, hence !important) become single
     full-width blocks — e.g. the dashboard reads 2, 2, À faire, Lieux les
     plus capturés. */
  .stats{grid-template-columns:1fr 1fr}
  .screen .grid{grid-template-columns:1fr !important}
}
@media (max-width:820px){
  .login{grid-template-columns:1fr}
  .login .pane-art{display:none}
  .app{grid-template-columns:1fr}
  /* The sidebar becomes an off-canvas drawer, opened by the topbar burger
     (see the nav-toggle script in the Rails layout). */
  .side{
    position:fixed;top:0;bottom:0;left:0;width:290px;z-index:60;
    transform:translateX(-105%);transition:transform .2s ease;
    box-shadow:var(--shadow-lg);overflow-y:auto;
  }
  body.nav-open .side{transform:none}
  body.nav-open .navbackdrop{display:block}
  /* Phone-only extras (the 2×2 stats + stacked grids live in the 1100px
     query above): tighter padding, wizard step rail wraps above the panes. */
  .screen{padding:22px 16px 48px}
  .wizard{grid-template-columns:1fr}
  .steps{position:static;flex-direction:row;flex-wrap:wrap}
  .steps .step{flex:1 1 45%}
  .topbar{padding:12px 16px}
}