:root{
      /* Côte d'Ivoire flag */
      --ci-orange:#F77F00;
      --ci-orange-dark:#D66C00;
      --ci-green:#009E60;
      --ci-green-dark:#007A49;

      --bg:#FBFAF8;
      --surface:#FFFFFF;
      --surface-2:#F7F6F4;

      --text:#1F2937;
      --muted:#6B7280;
      --border:#E6E2DD;

      --shadow:0 14px 36px rgba(17,24,39,0.10);
      --shadow-soft:0 10px 24px rgba(17,24,39,0.08);

      --radius:18px;
      --radius-sm:14px;

      --max: 1120px;
      --pad: 18px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html, body { height: 100%; }
    body{
      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      overflow-x: hidden;
    }
    a{ color: inherit; text-decoration: none; }

    /* TOPBAR (aligné index) */
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--border);
    }
    .topbar-inner{
      max-width:var(--max);margin:auto;padding:14px var(--pad);
      display:flex;align-items:center;justify-content:space-between;gap:14px;
    }
    .brand{display:flex;gap:10px;align-items:center;min-width:240px}
    .brand-badge{
      width:38px;height:38px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,rgba(247,127,0,.18),rgba(0,158,96,.18));
      border:1px solid rgba(247,127,0,.2);
    }
    .brand-badge i{ color: var(--text); opacity: .9; }
    .brand-title{ display:flex; flex-direction: column; line-height: 1.1; }
    .brand-title strong{font-size:14px;letter-spacing:.2px}
    .brand-title .accent{color:var(--ci-orange);font-weight:900}
    .brand-title span{font-size:12px;color:var(--muted)}

    .top-right{
      display:flex;align-items:center;gap:10px;
      color:var(--muted);font-size:13px;user-select:none;
    }
    .top-right i{ color: var(--ci-green); }

    .btn-top{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:10px 12px;border-radius:14px;border:0;
      cursor:pointer;font-weight:900;font-size:13px;color:#fff;
      background: linear-gradient(135deg, var(--ci-orange), var(--ci-green));
      box-shadow: 0 10px 18px rgba(247,127,0,0.18);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      white-space: nowrap;
    }
    .btn-top:hover{ transform: translateY(-1px); filter: brightness(0.98); box-shadow: var(--shadow-soft); }

    /* HERO (aligné index) */
    .hero{
      border-bottom:1px solid var(--border);
      background:
        radial-gradient(900px 360px at 25% 0%, rgba(247,127,0,.14), transparent 60%),
        radial-gradient(900px 360px at 85% 15%, rgba(0,158,96,.14), transparent 60%),
        linear-gradient(180deg, #ffffff, #fbfaf8);
    }
    .hero-inner{
      max-width:980px;margin:auto;padding:40px var(--pad) 24px;
      text-align:center;
    }
    .hero-logo{
      width:54px;height:54px;border-radius:16px;
      margin:0 auto 14px;
      display:flex;align-items:center;justify-content:center;
      background:#fff;border:1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }
    .hero-logo i{
      font-size:20px;
      background: linear-gradient(90deg, var(--ci-orange), var(--ci-green));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    h1{font-size:34px;font-weight:900;margin-bottom:10px;letter-spacing:-0.7px}
    .hero-sub{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:760px;margin:0 auto}

    /* FILTERS (harmonisé) */
    .filters{
      max-width:980px;margin:18px auto 0;padding:0 var(--pad);
      display:flex;gap:10px;flex-wrap:wrap;
    }
    .filters input,.filters select{
      flex:1;min-width:200px;
      padding:12px 12px;border-radius:14px;
      border:1px solid var(--border);
      font-size:14.5px;
      background:#fff;
      outline:none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .filters input:focus,.filters select:focus{
      border-color: rgba(247,127,0,0.45);
      box-shadow: 0 0 0 4px rgba(247,127,0,0.12);
    }

    /* GRID */
    .grid{
      max-width:980px;margin:auto;padding:14px var(--pad) 40px;
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
      gap:14px;
    }

    .doc-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:16px;
      box-shadow: 0 10px 20px rgba(17,24,39,0.06);
      display:flex;flex-direction:column;gap:10px;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .doc-card:hover{
      transform:translateY(-2px);
      box-shadow: var(--shadow-soft);
      border-color: rgba(247,127,0,0.22);
    }

    .doc-title{font-weight:900;font-size:14px;letter-spacing:-0.2px}
    .doc-meta{font-size:12.8px;color:var(--muted)}

    .tags{display:flex;gap:8px;flex-wrap:wrap}
    .tag{
      font-size:12px;font-weight:900;
      padding:4px 8px;border-radius:999px;
      background:rgba(247,127,0,.12);
      color:var(--ci-orange-dark);
      border:1px solid rgba(247,127,0,.25);
    }
    .tag.ok{
      background:rgba(0,158,96,.12);
      color:var(--ci-green-dark);
      border-color:rgba(0,158,96,.3)
    }
    .tag.failed{
      background:rgba(220,38,38,.12);
      color:#b91c1c;
      border-color:rgba(220,38,38,.3)
    }

    .actions{
      margin-top:auto;display:flex;gap:8px;
    }
    .btn{
      flex:1;
      padding:10px 10px;
      border-radius:14px;
      border:0;
      cursor:pointer;
      font-size:13px;
      font-weight:900;
      background:linear-gradient(135deg,var(--ci-orange),var(--ci-green));
      color:#fff;
      box-shadow: 0 10px 18px rgba(247,127,0,0.18);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(0.98); box-shadow: var(--shadow-soft); }
    .btn.disabled{
      background:#9ca3af;
      cursor:not-allowed;
      box-shadow:none;
      transform:none;
      filter:none;
    }

    /* FOOTER (aligné) */
    footer{
      border-top: 1px solid var(--border);
      text-align:center;
      padding:18px var(--pad) 34px;
      font-size:12.8px;
      color:var(--muted);
      background: #fff;
    }

    @media(max-width:860px){
      h1{font-size:28px}
    }