/* ============================================================
   Comparateur de formats d'images — Emeraude IA
   Polices auto-hébergées (aucune requête réseau : promesse « 100 % local »).
   Variable fonts Fontsource (latin + latin-ext).
   ============================================================ */
@font-face{
  font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;
  src:url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;
  src:url(fonts/dm-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- Surfaces sombres (canvas outil — on garde le dark pour juger les images) --- */
  --bg:#0e1411; --panel:#15201b; --panel2:#1d2b24; --border:#2a3a32;
  --text:#eef3f0; --muted:#9fb1a8;

  /* --- Marque Emeraude IA (charte v0.2.0) --- */
  --emerald-core:#006241;   /* CTA primary, logo */
  --emerald-light:#0d7c53;  /* hover CTA */
  --emerald-6:#4db688;      /* accent vif sur fond sombre (borders actives, barres) */
  --emerald-5:#75c9a3;      /* highlights clairs */
  --accent:var(--emerald-6);     /* accent “highlight” (visible sur dark) */
  --good:#41d18b; --warn:#fbbc05; --err:#ff7a6b;

  /* --- Radius / ombres (charte §2) --- */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-full:9999px;
  --shadow:0 4px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);

  --font-sans:'DM Sans','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Space Grotesk','DM Sans','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---- Header + marque ---- */
header{
  padding:14px 22px; border-bottom:1px solid var(--border); background:var(--panel);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text);
  padding-right:18px; margin-right:2px; border-right:1px solid var(--border)}
.brand-name{font-family:var(--font-display); font-weight:500; font-size:16px; letter-spacing:-.01em; white-space:nowrap}
.brand-name b{font-weight:700; color:var(--emerald-5)}
.titles h1{font-family:var(--font-display); font-size:16px; margin:0; font-weight:600; letter-spacing:-.01em}
.titles .sub{color:var(--muted); font-size:13px; margin-top:2px}
.spacer{flex:1}

/* ---- Boutons (CTA pill façon Emeraude) ---- */
.btn{
  background:var(--emerald-core); color:#fff; border:0; padding:10px 18px; border-radius:var(--r-full);
  font-family:var(--font-sans); font-weight:600; font-size:14px; cursor:pointer;
  transition:background .2s cubic-bezier(.4,0,.2,1), transform .1s; box-shadow:0 2px 10px rgba(0,98,65,.35);
}
.btn:hover{background:var(--emerald-light)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none}
.btn.secondary:hover{border-color:var(--emerald-6); background:var(--panel2)}

/* ---- Bandeau « gain cumulé » (décisionnel, screenshot-able) ---- */
.summary{
  display:flex; align-items:baseline; gap:18px 24px; flex-wrap:wrap;
  padding:14px 22px; background:linear-gradient(90deg,rgba(0,98,65,.18),rgba(0,98,65,.04));
  border-bottom:1px solid var(--border);
}
.summary .sum-head{font-family:var(--font-display); font-size:12px; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--muted); font-weight:500}
.summary .sum-main{font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em}
.summary .sum-main b{color:var(--emerald-5)}
.summary .sum-sub{font-size:13px; color:var(--muted)}
.summary .sum-fmts{flex-basis:100%; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.summary .sum-fmts b{color:var(--text); font-weight:600}

.layout{flex:1; display:flex; min-height:0}
/* Sidebar = liste des "pages" (une par nom d'image) */
aside{
  width:280px; flex-shrink:0; border-right:1px solid var(--border); background:var(--panel);
  overflow-y:auto; padding:12px;
}
aside .nav-title{font-family:var(--font-display); font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:8px 10px;font-weight:500}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text);font-size:14px;
  border:1px solid transparent; transition:background .15s, border-color .15s;
}
.nav-item:hover{background:var(--panel2)}
.nav-item.active{background:var(--panel2);border-color:var(--emerald-6)}
.nav-item:focus-visible{outline:2px solid var(--emerald-6); outline-offset:2px}
.nav-item .count{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:2px 7px;border-radius:var(--r-full);font-variant-numeric:tabular-nums}
main{flex:1; overflow-y:auto; padding:26px 30px}
.page-head{font-family:var(--font-display); margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:-.02em}
.page-sub{color:var(--muted); margin:0 0 22px; font-size:14px}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card.missing{opacity:.55; border-style:dashed}
.thumb{
  background:
    linear-gradient(45deg,#1b2620 25%,transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg,#1b2620 25%,transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#1b2620 75%) -8px 0/16px 16px,
    linear-gradient(-45deg,transparent 75%,#1b2620 75%) -8px 0/16px 16px,
    #131c17;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative;
}
.thumb img{max-width:100%; max-height:100%; display:block}
.thumb .ph{color:var(--muted); font-size:13px}
.thumb .status{position:absolute; inset:0; display:flex; flex-direction:column; gap:4px;
  align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:10px}
.thumb .status.err{color:var(--warn)}
.thumb .status small{color:var(--muted); font-size:11px}
.fmt-badge{
  position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  border:1px solid var(--border); color:var(--text); font-weight:700; font-size:12px;
  padding:4px 10px; border-radius:var(--r-sm); letter-spacing:.5px; font-family:var(--font-display);
}
.best{position:absolute; top:10px; right:10px; background:var(--good); color:#04240f;
  font-weight:700; font-size:11px; padding:4px 9px; border-radius:var(--r-sm)}
.meta{padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px}
.row .k{color:var(--muted)}
.row .v{font-weight:600; font-variant-numeric:tabular-nums}
.bar{height:8px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--emerald-5),var(--emerald-core))}
.save{font-size:12px; color:var(--good)}
.save.zero{color:var(--muted)}
.empty{
  margin:auto; max-width:580px; text-align:center; color:var(--muted); padding:60px 20px;
}
.empty h2{font-family:var(--font-display); color:var(--text); font-size:28px; font-weight:600; letter-spacing:-.02em}
.drop{border:2px dashed var(--border); border-radius:var(--r-lg); padding:40px; margin-top:20px; transition:.15s}
.drop.over{border-color:var(--emerald-6); background:var(--panel)}
code{background:var(--panel2); padding:2px 6px; border-radius:6px; font-size:13px; font-family:'JetBrains Mono',ui-monospace,Consolas,monospace}
.hidden{display:none !important}
input[type=file]{display:none}
footer{padding:10px 22px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;background:var(--panel)}

/* ---- Inspecteur (zoom synchronisé / flip / diff) ---- */
.insp{position:fixed; inset:0; z-index:1000; background:#070b09; display:flex; flex-direction:column}
.insp-bar{display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-wrap:wrap}
.insp-title{font-family:var(--font-display); font-weight:600; font-size:15px}
.insp-tools{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.insp-tools button{background:var(--panel2); color:var(--text); border:1px solid var(--border);
  padding:7px 11px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:600; font-family:var(--font-sans)}
.insp-tools button:hover{border-color:var(--emerald-6)}
.insp-tools button.on{background:var(--emerald-core); color:#fff; border-color:var(--emerald-core)}
.insp-tools button:disabled{opacity:.4; cursor:not-allowed}
.seg{display:flex; gap:0} .seg button{border-radius:0}
.seg button:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} .seg button:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0; border-left:0}
.insp-chips{display:flex; gap:6px} .insp-chips button{font-variant-numeric:tabular-nums}
.insp-z{font-size:13px; color:var(--muted); min-width:52px; text-align:right; font-variant-numeric:tabular-nums}
.insp-stage{flex:1; display:grid; gap:2px; background:var(--border); min-height:0; min-width:0; touch-action:none}
.insp-panel{position:relative; overflow:hidden; background:#0a100d; cursor:grab; min-width:0; min-height:0}
.insp-panel.drag{cursor:grabbing}
.insp-img{position:absolute; top:0; left:0; transform-origin:0 0; max-width:none; user-select:none;
  -webkit-user-drag:none; pointer-events:none}
.insp.pixelated .insp-img{image-rendering:pixelated}
.insp-label{position:absolute; top:10px; left:10px; z-index:2; background:rgba(0,0,0,.7);
  border:1px solid var(--border); padding:4px 10px; border-radius:var(--r-sm); font-size:12px; font-weight:600;
  pointer-events:none; backdrop-filter:blur(4px); font-family:var(--font-display)}
/* badge format bien visible en mode flip */
.flip-lbl{top:14px; left:50%; transform:translateX(-50%); font-size:19px; padding:9px 20px;
  background:var(--emerald-core); color:#fff; border-color:var(--emerald-core); box-shadow:0 4px 18px rgba(0,0,0,.4)}

/* ---- Contrôles du mode Diff ---- */
.diff-ctrl{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.diff-ctrl select{background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:6px 8px; font-size:13px; font-family:var(--font-sans); font-weight:600}
.diff-ctrl input[type=range]{accent-color:var(--emerald-6); width:96px}
.diff-ctrl .arrow{color:var(--emerald-5); font-weight:700}
/* légende heatmap */
.diff-legend{position:absolute; bottom:12px; left:12px; z-index:3; display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.6); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 10px;
  font-size:11px; color:var(--muted); pointer-events:none; backdrop-filter:blur(4px)}
.diff-legend .ramp{width:140px; height:8px; border-radius:var(--r-full);
  background:linear-gradient(90deg,#0e1411,#006241 35%,#fbbc05 60%,#ff3b30 80%,#fff)}

.insp-hint{padding:8px 16px; background:var(--panel); border-top:1px solid var(--border);
  color:var(--muted); font-size:12px; text-align:center}
/* panneau d'aide de l'inspecteur */
.insp-help{position:absolute; top:58px; right:14px; z-index:5; width:400px; max-width:calc(100vw - 28px);
  background:var(--panel); border:1px solid var(--emerald-6); border-radius:var(--r-md); padding:16px 18px;
  box-shadow:var(--shadow); font-size:13px; line-height:1.5; max-height:calc(100vh - 90px); overflow-y:auto}
.insp-help h3{font-family:var(--font-display); margin:0 0 8px; font-size:14px; font-weight:600}
.insp-help p{margin:8px 0; color:var(--muted)}
.insp-help b{color:var(--text)}
.insp-help kbd{background:var(--panel2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:12px}
.fmt-note{font-size:13px; line-height:1.6; color:var(--muted)}
.privacy{background:rgba(0,98,65,.12); border:1px solid var(--emerald-6); color:var(--text);
  border-radius:var(--r-sm); padding:11px 16px; font-size:14px; display:inline-block; margin-bottom:6px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}