/* Minimal “Ideo-Lab compatible” styling, sans dépendances */

.ig-page { padding: 10px 8px; }
.ig-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ig-title { margin:0; font-size:26px; letter-spacing: .2px; }
.ig-sub { margin:6px 0 0; opacity:.8; }

.ig-actions { display:flex; gap:10px; flex-wrap:wrap; }

.ig-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin: 12px 0 14px; }
@media (max-width: 1100px) { .ig-grid-3 { grid-template-columns: 1fr; } }

.kpi-card {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(0,0,0,.18);
}
.kpi-label { font-size: 12px; opacity:.75; text-transform: uppercase; letter-spacing: .12em; }
.kpi-value { font-size: 26px; margin-top: 6px; }
.kpi-hint { font-size: 12px; opacity:.7; margin-top: 4px; }

.panel {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    padding: 12px;
}

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.tool-left { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tool-right { display:flex; gap:10px; align-items:center; }

.ig-input, .ig-select, .ig-textarea {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(0,0,0,.25);
    color: inherit;
    padding: 10px 12px;
    outline: none;
}
.ig-input:focus, .ig-select:focus, .ig-textarea:focus {
    border-color: rgba(120,200,255,.65);
    box-shadow: 0 0 0 3px rgba(120,200,255,.12);
}

.ig-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: inherit;
    padding: 10px 12px;
    border-radius: 12px;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.ig-btn:hover { background: rgba(255,255,255,.10); }
.ig-btn-primary { border-color: rgba(120,200,255,.45); background: rgba(120,200,255,.14); }
.ig-btn-primary:hover { background: rgba(120,200,255,.22); }
.ig-btn-sm { padding: 7px 10px; border-radius: 10px; }

.table-wrap { overflow:auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.06); }
.ig-table { width:100%; border-collapse:separate; border-spacing:0; min-width: 980px; }
.ig-table thead th {
    position: sticky;
    top: 0;
    background: rgba(10,10,14,.92);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity:.9;
    padding: 12px 12px;
    text-align:left;
}
.ig-table tbody td {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    vertical-align: top;
}
.row-hover:hover td { background: rgba(120,200,255,.06); }

.thlink { color: inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.sortchip { font-size: 10px; opacity:.7; }

.docname { font-weight: 650; }
.mini { font-size: 12px; }
.muted { opacity: .75; }
.num { text-align:right; white-space:nowrap; }
.act { width: 130px; text-align:right; }

.pill {
    display:inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    font-size: 12px;
    white-space:nowrap;
}
.pill2 { border-color: rgba(120,200,255,.25); }

.pager { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:12px; flex-wrap:wrap; }
.pager-right { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Modal */
.ig-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.ig-modal.open { display: block; }
.ig-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.65); }
.ig-modal-card {
    position: relative;
    width: min(920px, calc(100vw - 24px));
    margin: 40px auto;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(12,12,16,.95);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    overflow: hidden;
}
.ig-modal-head { display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ig-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.ig-x { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 10px; padding: 6px 10px; cursor:pointer; }
.ig-form { padding: 14px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }
.grid2 label { display:block; font-size: 12px; opacity:.8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }

.pill-pin { border-color: rgba(255,210,120,.35); background: rgba(255,210,120,.10); }
.pill-feat { border-color: rgba(180,255,160,.35); background: rgba(180,255,160,.10); }
.pill-lock { border-color: rgba(255,120,160,.35); background: rgba(255,120,160,.10); }

.tagrow { margin-top: 6px; display:flex; flex-wrap:wrap; gap:6px; }
.tagchip {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(120,200,255,.20);
    background: rgba(120,200,255,.08);
    opacity:.92;
}


/* =========================
DOCUMENTS – BRIGHT V2
(override: plus clair, plus de relief)
========================= */

/* Variables locales */
.ig-page{
    --d-bg: rgba(255,255,255,.06);
    --d-bg2: rgba(255,255,255,.10);
    --d-line: rgba(255,255,255,.14);
    --d-line2: rgba(255,255,255,.22);
    --d-glow: rgba(120,200,255,.22);
    --d-glow2: rgba(120,200,255,.32);
    --d-text: rgba(255,255,255,.92);
    --d-muted: rgba(255,255,255,.72);
}

/* Titres plus visibles */
.ig-title{ font-size: 30px; letter-spacing: .2px; color: var(--d-text); }
.ig-sub{ color: var(--d-muted); font-size: 14px; }

/* KPI : plus “card” + relief + gradient doux */
.kpi-card{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid var(--d-line2);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.kpi-value{ font-size: 30px; }
.kpi-label{ opacity:.85; }
.kpi-hint{ opacity:.78; }

/* Panel + toolbar : plus clair */
.panel{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid var(--d-line2);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

/* Inputs/selects : plus lumineux + focus plus fort */
.ig-input, .ig-select, .ig-textarea{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.ig-input::placeholder{ color: rgba(255,255,255,.55); }
.ig-input:focus, .ig-select:focus, .ig-textarea:focus{
    border-color: rgba(120,200,255,.85);
    box-shadow: 0 0 0 4px rgba(120,200,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Boutons : plus contrastés */
.ig-btn{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
}
.ig-btn:hover{ background: rgba(255,255,255,.16); }
.ig-btn-primary{
    background: linear-gradient(180deg, rgba(120,200,255,.30), rgba(120,200,255,.18));
    border-color: rgba(120,200,255,.55);
    box-shadow: 0 10px 26px rgba(120,200,255,.12);
}
.ig-btn-primary:hover{
    background: linear-gradient(180deg, rgba(120,200,255,.40), rgba(120,200,255,.22));
}

/* Table wrapper */
.table-wrap{
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}

/* Header table : plus lisible */
.ig-table thead th{
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
    border-bottom: 1px solid rgba(255,255,255,.18);
    opacity: 1;
    color: rgba(255,255,255,.92);
}

/* Corps table : alternance + séparateurs visibles */
.ig-table tbody td{
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.ig-table tbody tr:nth-child(odd) td{
    background: rgba(255,255,255,.03);
}
.row-hover:hover td{
    background: rgba(120,200,255,.10) !important;
}

/* Colonnes texte : un peu plus lisible */
.docname{ color: rgba(255,255,255,.95); }
.desc{ color: rgba(255,255,255,.78); }
.muted{ opacity: .78; }

/* Pills/tagchips : plus contrastées */
.pill{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
}
.pill2{
    background: rgba(120,200,255,.12);
    border-color: rgba(120,200,255,.28);
}
.tagchip{
    background: rgba(120,200,255,.14);
    border-color: rgba(120,200,255,.35);
}

/* Status chips */
.pill-pin{ background: rgba(255,210,120,.14); border-color: rgba(255,210,120,.35); }
.pill-feat{ background: rgba(180,255,160,.14); border-color: rgba(180,255,160,.35); }
.pill-lock{ background: rgba(255,120,160,.14); border-color: rgba(255,120,160,.35); }

/* Pager un peu plus “clair” */
.pager{ padding-top: 6px; }

/* Modal : un peu moins noir */
.ig-modal-card{
    background: linear-gradient(180deg, rgba(20,20,26,.96), rgba(12,12,16,.96));
    border: 1px solid rgba(255,255,255,.16);
}
.ig-modal-head, .ig-modal-foot{
    border-color: rgba(255,255,255,.14);
}


/* ---- Fix SELECT/OPTION (Firefox/Windows) ---- */
.ig-select{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.12);
}

.ig-select option{
  background: #0f1116;      /* fond dark lisible */
  color: #ffffff;           /* texte blanc */
}

/* Certains navigateurs utilisent optgroup */
.ig-select optgroup{
  background: #0f1116;
  color: #ffffff;
}

/* ---- Modal plus claire / plus de relief ---- */
.ig-modal-backdrop{ background: rgba(0,0,0,.55); } /* moins opaque */

.ig-modal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
}

.ig-modal-head h3{ color: rgba(255,255,255,.95); }
.ig-modal-head, .ig-modal-foot{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
}

/* Labels + zones */
.grid2 label{ opacity: .9; }
.ig-form{ background: rgba(0,0,0,.10); }

/* File input (Firefox) */
.ig-input[type="file"]{
  padding: 8px 10px;
}


/* =========================
   MODAL OPAQUE (ANTI-TRANSPARENCE)
   ========================= */

/* assombrit + floute légèrement l’arrière (optionnel) */
.ig-modal-backdrop{
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(3px);
}

/* la carte doit être opaque */
.ig-modal-card{
  background: #12141a !important;               /* opaque */
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.75) !important;
}

/* header/footer légèrement différenciés */
.ig-modal-head,
.ig-modal-foot{
  background: #0f1116 !important;               /* opaque */
  border-color: rgba(255,255,255,.14) !important;
}

/* le contenu du form ne doit PAS être transparent */
.ig-form{
  background: #12141a !important;               /* opaque */
}

/* inputs & textarea un poil plus clairs dans la modal */
.ig-modal .ig-input,
.ig-modal .ig-select,
.ig-modal .ig-textarea{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}


/* =========================
   PAGE OPAQUE (ANTI-MATRIX)
   ========================= */
.kpi-card,
.panel,
.table-wrap,
.ig-table thead th,
.ig-table tbody td{
  backdrop-filter: none !important;
}

.kpi-card{
  background: #12141a !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}

.panel{
  background: #12141a !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.45) !important;
}

.table-wrap{
  background: #0f1116 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.ig-table thead th{
  background: #0f1116 !important;
}

.ig-table tbody td{
  background: #12141a !important;
}

.ig-table tbody tr:nth-child(odd) td{
  background: #101218 !important;
}


/* Actions compactes (icônes) */
.act { width: 92px; text-align:right; }  /* plus étroit */

.iconbtn{
  width: 38px; height: 38px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  text-decoration:none;
  margin-left: 8px;
  user-select:none;
}

.iconbtn:hover{ background: rgba(255,255,255,.14); }

.iconbtn-primary{
  border-color: rgba(120,200,255,.45);
  background: rgba(120,200,255,.16);
}
.iconbtn-primary:hover{ background: rgba(120,200,255,.24); }

/* Preview modal (miniature visible) */
.ig-modal-card-preview{
  width: min(980px, calc(100vw - 24px)) !important;
  margin: 42px auto !important;
}

.pv-body{ padding: 12px 14px; }
.pv-meta{ font-size: 12px; opacity: .75; margin: 2px 0 10px; }

.pv-box{
  background: #0f1116;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px;
}

.pv-frame{
  width: 100%;
  height: 520px;          /* <-- “miniature” mais lisible */
  border: 0;
  border-radius: 12px;
  background: #0f1116;
}

.pv-img{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 12px;
}

.pv-pre{
  max-height: 520px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: #0f1116;
  border: 1px solid rgba(255,255,255,.10);
  white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

.pv-empty{
  padding: 18px;
  opacity: .8;
}


/* Actions: alignement horizontal */
.act { text-align: right; } /* ok */
.act-row{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* au cas où un style global mettrait button/a en block */
.act-row .iconbtn{
  display: inline-flex !important;
  vertical-align: middle;
  margin-left: 0 !important; /* on gère l'espace via gap */
}