/* ============================================================
   dcptools.css — Feuille de style spécifique DCP Envelope Tool
   Chargée après style.css
   ============================================================ */

:root {
  --bg:#0e0f11; --bg2:#16181c; --bg3:#1e2026;
  --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.16);
  --text:#e8e9eb; --text2:#8a8f9a; --text3:#555a66;
  --blue:#4a9eff; --blue-bg:rgba(74,158,255,0.1); --blue-border:rgba(74,158,255,0.25);
  --green:#4ade80; --green-bg:rgba(74,222,128,0.08); --green-border:rgba(74,222,128,0.2);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,0.08); --amber-border:rgba(251,191,36,0.2);
  --red:#f87171; --red-bg:rgba(248,113,113,0.08); --red-border:rgba(248,113,113,0.2);
  --r:8px; --rl:12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem 5rem;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

.wrap { position: relative; z-index: 1; width: 100%; max-width: 620px; }

/* ── Header ───────────────────────────────────────────────── */
.header { margin-bottom: 2.5rem; }
.eyebrow { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; margin-bottom: 10px; }
.h1 { font-size: 28px; font-weight: 300; letter-spacing: -.5px; }
.h1 strong { font-weight: 500; }
.sub { margin-top: 8px; font-size: 15px; color: var(--text2); line-height: 1.6; }
.scope { margin-top: 6px; font-size: 13px; color: var(--text3); }

/* ── Étapes ───────────────────────────────────────────────── */
.steps { display: flex; gap: 8px; margin-bottom: 2rem; }
.step { flex: 1; padding: 8px 12px; border-radius: var(--r); border: .5px solid var(--border); font-family: 'DM Mono', monospace; font-size: 12px; text-align: center; color: var(--text3); transition: all .2s; }
.step.active { border-color: var(--blue-border); color: var(--blue); background: var(--blue-bg); }
.step.done   { border-color: var(--green-border); color: var(--green); background: var(--green-bg); }
.step.error  { border-color: var(--red-border);   color: var(--red);   background: var(--red-bg); }

/* ── Cards ────────────────────────────────────────────────── */
.card { background: var(--bg2); border: .5px solid var(--border); border-radius: var(--rl); padding: 1.25rem 1.5rem; margin-bottom: .75rem; }
.card-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }

/* ── Folder picker ────────────────────────────────────────── */
.folder-row { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: .5px solid var(--border); border-radius: var(--r); padding: 9px 12px; transition: border-color .2s; }
.folder-row.active { border-color: var(--border2); }
.folder-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text3); }
.folder-path { flex: 1; font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-path.sel { color: var(--text); }
.btn-sm { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text2); background: var(--bg); border: .5px solid var(--border2); border-radius: var(--r); padding: 5px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .15s, border-color .15s; }
.btn-sm:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

/* ── MXF list ─────────────────────────────────────────────── */
.mxf-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mxf-item { display: flex; align-items: center; gap: 9px; padding: 7px 12px; background: var(--bg3); border: .5px solid var(--border); border-radius: var(--r); animation: fi .2s ease; }
.mxf-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.mxf-name { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxf-meta { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text3); margin-top: 2px; }
.badge { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.badge.image   { background: var(--blue-bg);  color: var(--blue);  border: .5px solid var(--blue-border); }
.badge.audio   { background: var(--green-bg); color: var(--green); border: .5px solid var(--green-border); }
.badge.unknown { background: var(--bg);       color: var(--text3); border: .5px solid var(--border); }
@keyframes fi { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Case indicator ───────────────────────────────────────── */
.case-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r); font-family: 'DM Mono', monospace; font-size: 12px; margin-top: 8px; }
.case-badge.c11 { background: var(--blue-bg);  color: var(--blue);  border: .5px solid var(--blue-border); }
.case-badge.c12 { background: var(--red-bg);   color: var(--red);   border: .5px solid var(--red-border); }
.case-badge.c13 { background: var(--green-bg); color: var(--green); border: .5px solid var(--green-border); }

/* ── ISDCF Form ───────────────────────────────────────────── */
.name-result { font-family: 'DM Mono', monospace; font-size: 14px; color: var(--text); background: var(--bg3); border: .5px solid var(--blue-border); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; word-break: break-all; min-height: 40px; line-height: 1.5; }
.name-result .seg { color: var(--blue); }
.name-result .sep { color: var(--text3); }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.fi, select.fi { width: 100%; background: var(--bg3); border: .5px solid var(--border); border-radius: var(--r); padding: 7px 10px; font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); outline: none; transition: border-color .15s; appearance: none; -webkit-appearance: none; }
.fi:focus, select.fi:focus { border-color: var(--blue-border); }
.fi::placeholder { color: var(--text3); }
select.fi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555a66' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
select.fi option { background: var(--bg2); }

/* ── Format toggle ────────────────────────────────────────── */
.toggle-row { display: flex; gap: 6px; }
.tog { flex: 1; padding: 8px; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; border-radius: var(--r); border: .5px solid var(--border); cursor: pointer; background: var(--bg3); color: var(--text3); text-align: center; transition: all .15s; }
.tog:hover { color: var(--text2); }
.tog.on { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }

/* ── Option row ───────────────────────────────────────────── */
.opt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg3); border: .5px solid var(--border); border-radius: var(--r); cursor: pointer; }
.opt-row:hover { border-color: var(--border2); }
.opt-row label { font-size: 14px; color: var(--text2); cursor: pointer; flex: 1; }
.opt-hint { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text3); }
input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue); flex-shrink: 0; }

/* ── Status / progress ────────────────────────────────────── */
.status { padding: 10px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.5; margin-top: .75rem; display: none; white-space: pre-wrap; }
.status.info { background: var(--blue-bg);  color: var(--blue);  border: .5px solid var(--blue-border);  display: block; }
.status.ok   { background: var(--green-bg); color: var(--green); border: .5px solid var(--green-border); display: block; }
.status.warn { background: var(--amber-bg); color: var(--amber); border: .5px solid var(--amber-border); display: block; }
.status.err  { background: var(--red-bg);   color: var(--red);   border: .5px solid var(--red-border);   display: block; }
.prog-wrap { margin-top: 6px; height: 2px; background: var(--bg3); border-radius: 999px; overflow: hidden; display: none; }
.prog-wrap.on { display: block; }
.prog-bar { height: 100%; background: var(--blue); border-radius: 999px; width: 0; transition: width .3s; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-main { width: 100%; margin-top: 1rem; padding: 13px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--bg); background: var(--text); border: none; border-radius: var(--r); cursor: pointer; transition: opacity .2s, transform .1s; display: block; }
.btn-main:hover:not(:disabled) { opacity: .9; }
.btn-main:active:not(:disabled) { transform: scale(.99); }
.btn-main:disabled { opacity: .2; cursor: not-allowed; }
.btn-secondary { width: 100%; margin-top: .5rem; padding: 11px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--text2); background: transparent; border: .5px solid var(--border2); border-radius: var(--r); cursor: pointer; transition: all .15s; }
.btn-secondary:hover { color: var(--text); border-color: var(--border); }

/* ── Sections ─────────────────────────────────────────────── */
.section { display: none; }
.section.visible { display: block; }

/* ── Misc ─────────────────────────────────────────────────── */
.divider { height: .5px; background: var(--border); margin: .75rem 0; }
.footer { margin-top: 3rem; text-align: center; font-size: 13px; color: var(--text3); line-height: 1.7; }
.footer a { color: var(--text2); text-decoration: none; }
.footer a:hover { color: var(--text); }
.browser-warn { background: var(--amber-bg); border: .5px solid var(--amber-border); border-radius: var(--r); padding: 10px 14px; font-size: 14px; color: var(--amber); margin-bottom: 1.5rem; display: none; }

/* ─── TAILLE DE BASE GLOBALE ─── à mettre en toute fin de style.css ─── */
body, p, li, td, th, span, div, input, select, textarea, button, a {
	font-size: 15px; 
    font-size: inherit;
	font-size: 15px; 
}