/* ============================================================
   topage.css — Styles spécifiques module Topage
   Copie quasi-littérale des styles .tg-* du prototype v0.2.10,
   préfixés .tp-* pour éviter les collisions avec .tg-first/.tg-last
   du toggle-group générique (style.css:205-206).
   ============================================================ */

/* ── CARDS ─────────────────────────────────────────────── */
.tp-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:20px 22px;margin-bottom:16px;box-shadow:0 2px 8px rgba(26,58,143,.06);
  transition:opacity .2s;}
.tp-card.disabled{opacity:.45;pointer-events:none;background:#fafbfd;}
.tp-card.disabled .tp-card-title::after{content:' (désactivée)';font-size:11px;color:var(--text-muted);font-weight:600;}
.tp-card-title{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:800;color:var(--navy);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.tp-card-sub{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-muted);margin-bottom:16px;}
.tp-card-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  background:var(--gold);color:var(--navy);border-radius:50%;font-size:11px;font-weight:800;}

/* ── FIELDS ─────────────────────────────────────────────── */
.tp-field{margin-bottom:14px;}
.tp-field-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.tp-field-row .tp-field{flex:1;min-width:200px;margin-bottom:0;}
.tp-label{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;display:block;}
.tp-help{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text-hint);margin-top:4px;line-height:1.4;}
.tp-input{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:10px;
  padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);outline:none;
  transition:border-color .15s;}
.tp-input:focus{border-color:var(--navy);}
.tp-input::placeholder{color:var(--text-hint);}

/* ── PROGRESS ─────────────────────────────────────────── */
.tp-progress-wrap{margin-top:16px;}
.tp-progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.tp-progress-label{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.6px;}
.tp-progress-count{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:800;color:var(--navy);}
.tp-progress-bar{height:10px;background:var(--bg);border-radius:5px;overflow:hidden;border:1px solid var(--border);}
.tp-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold) 0%,#e8c87a 100%);
  width:0%;transition:width .3s ease;}
.tp-log{margin-top:12px;background:#0d2260;color:#d8e0f5;border-radius:10px;padding:12px 14px;
  font-family:'Consolas','Monaco',monospace;font-size:11px;line-height:1.6;
  max-height:200px;overflow-y:auto;display:none;}
.tp-log.active{display:block;}
.tp-log-line{padding:2px 0;}
.tp-log-line.err{color:#ff8a8a;}
.tp-log-line.ok{color:#8aff9a;}
.tp-log-line.info{color:#c9a84c;}

/* ── ALERT ─────────────────────────────────────────────── */
.tp-alert{background:var(--gold-bg);border-left:4px solid var(--gold);border-radius:8px;
  padding:12px 16px;margin-bottom:16px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);}
.tp-alert strong{font-family:'Exo 2',sans-serif;font-weight:800;}
.tp-alert.info{background:var(--navy-light);border-color:var(--navy);}
.tp-alert.err{background:var(--red-bg);border-color:var(--red);color:var(--red);}

/* ── DROP ZONE ─────────────────────────────────────────── */
.tp-drop{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px dashed var(--border);
  border-radius:12px;padding:14px 18px;cursor:pointer;transition:all .15s;}
.tp-drop:hover,.tp-drop.over{border-color:var(--navy);background:var(--navy-light);}
.tp-drop.ok{border-style:solid;border-color:rgba(46,125,50,.4);background:#fafffe;}
.tp-drop input{display:none;}
.tp-drop-icon{flex-shrink:0;color:var(--navy);opacity:.6;}
.tp-drop.ok .tp-drop-icon{color:var(--green);opacity:1;}
.tp-drop-text{flex:1;}
.tp-drop-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.5px;}
.tp-drop-sub{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text-hint);margin-top:2px;}
.tp-drop-meta{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--navy);}

/* ── MODE TOGGLE ─────────────────────────────────────── */
.tp-mode{display:flex;align-items:center;gap:0;background:var(--bg);border-radius:10px;padding:3px;border:1.5px solid var(--border);width:fit-content;}
.tp-mode-btn{background:transparent;border:none;padding:7px 16px;border-radius:7px;
  font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-muted);cursor:pointer;transition:all .12s;}
.tp-mode-btn.active{background:var(--navy);color:var(--gold);}
.tp-mode-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ── PREVIEW TABLE ────────────────────────────────────── */
.tp-preview-wrap{background:#fff;border:1.5px solid var(--border);border-radius:12px;
  overflow:auto;max-height:380px;box-shadow:0 2px 8px rgba(26,58,143,.06);}
.tp-preview-table{width:100%;border-collapse:collapse;font-size:12px;}
.tp-preview-table thead tr{background:var(--navy);position:sticky;top:0;z-index:5;}
.tp-preview-table thead th{font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:.8px;padding:10px 12px;text-align:left;
  white-space:nowrap;border-right:1px solid rgba(201,168,76,.2);}
.tp-preview-table thead th:last-child{border-right:none;}
.tp-preview-table tbody td{padding:7px 12px;border-bottom:1px solid var(--border-light);
  font-family:'DM Sans',sans-serif;color:var(--text);white-space:nowrap;}
.tp-preview-table tbody tr:hover{background:var(--navy-light);}
.tp-preview-table tbody tr.warn td{background:#fff3e0;}
.tp-preview-table tbody tr.forced td{background:var(--red-bg);}
.tp-preview-table .tp-tc{font-family:'Consolas',monospace;font-weight:600;}
.tp-preview-table .tp-pill{display:inline-block;padding:2px 8px;border-radius:10px;
  font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;letter-spacing:.4px;}
.tp-pill-3{background:var(--green-bg);color:var(--green);}
.tp-pill-2{background:#fff3e0;color:#1976d2;}
.tp-pill-1{background:#fff3e0;color:var(--orange);}
.tp-pill-feu{background:var(--gold-bg);color:#806020;}
.tp-pill-forced{background:var(--red-bg);color:var(--red);}
.tp-pill-auto{background:var(--navy-light);color:var(--navy);}

/* ── STATS ────────────────────────────────────────────── */
.tp-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;}
.tp-stat{background:var(--navy-light);border-radius:8px;padding:8px 14px;}
.tp-stat-label{font-family:'Exo 2',sans-serif;font-size:9px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.5px;}
.tp-stat-val{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:800;color:var(--navy);}