@font-face {
      font-family: 'Geist';
      src: url('/Geist.ttf') format('truetype-variations'), url('/Geist.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #000; --text: var(--wc-text); --text-secondary: var(--wc-text-secondary); --text-tertiary: var(--wc-text-tertiary);
      --accent: var(--wc-accent); --sep: rgba(255,255,255,0.08);
      --card-bg: rgba(255,255,255,0.03); --card-border: rgba(255,255,255,0.08);
    }

    body {
      font-family: var(--wc-police);
      background: #000;
      color: var(--wc-text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.012em;
      overflow-x: hidden;
    }

    .bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--wc-accent-rgb),0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(175,82,222,0.07) 0%, transparent 55%); }
    #bubbles-wrap { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
    .bubble { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; will-change: transform; transform: translateZ(0); }
    .b1 { animation: f1 44s ease-in-out infinite; }
    .b2 { animation: f2 60s ease-in-out infinite; }
    .b3 { animation: f3 50s ease-in-out infinite; }
    .b4 { animation: f4 70s ease-in-out infinite; }
    @keyframes f1 { 0%{transform:translate(0,0) scale(1)} 15%{transform:translate(35vw,20vh) scale(1.1)} 35%{transform:translate(60vw,-10vh) scale(0.9)} 55%{transform:translate(20vw,55vh) scale(1.05)} 75%{transform:translate(-10vw,30vh) scale(0.95)} 100%{transform:translate(0,0) scale(1)} }
    @keyframes f2 { 0%{transform:translate(0,0) scale(1)} 20%{transform:translate(-40vw,25vh) scale(1.08)} 40%{transform:translate(-60vw,-20vh) scale(0.93)} 65%{transform:translate(15vw,50vh) scale(1.06)} 85%{transform:translate(-25vw,-35vh) scale(0.97)} 100%{transform:translate(0,0) scale(1)} }
    @keyframes f3 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(-30vw,40vh) scale(0.92)} 45%{transform:translate(50vw,30vh) scale(1.07)} 70%{transform:translate(30vw,-40vh) scale(0.96)} 88%{transform:translate(-50vw,10vh) scale(1.04)} 100%{transform:translate(0,0) scale(1)} }
    @keyframes f4 { 0%{transform:translate(0,0) scale(1)} 18%{transform:translate(55vw,-30vh) scale(1.06)} 42%{transform:translate(-20vw,-50vh) scale(0.94)} 68%{transform:translate(40vw,45vh) scale(1.03)} 82%{transform:translate(-45vw,20vh) scale(0.97)} 100%{transform:translate(0,0) scale(1)} }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 16px;
      border-radius: var(--wc-r-s);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      font-family: inherit;
      transition: all 0.15s;
    }

    .btn-secondary {
      background: rgba(var(--wc-bleu-vif-rgb), 0.1);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.2);
      color: #7ab3f0;
    }
    .btn-secondary:hover { background: rgba(var(--wc-bleu-vif-rgb), 0.18); }

    .btn-danger {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.2);
      color: var(--wc-rouge-clair);
    }
    .btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

    main {
      max-width: 1000px;
      margin: 0 auto;
      padding: 36px 24px 80px;
    }

    .page-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--wc-texte-bleute);
      margin-bottom: 6px;
    }

    .page-subtitle {
      font-size: 14px;
      color: #4a6fa5;
      margin-bottom: 28px;
    }

    /* Filters */
    .toolbar {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
      align-items: center;
      flex-wrap: wrap;
    }

    .search-wrap {
      flex: 1;
      min-width: 200px;
      position: relative;
    }

    .search-wrap svg {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #4a6fa5;
      pointer-events: none;
    }

    .search-wrap input {
      width: 100%;
      padding: 9px 14px 9px 36px;
      background: rgba(10, 18, 40, 0.8);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.2);
      border-radius: var(--wc-r-s);
      color: var(--wc-texte-bleute);
      font-family: inherit;
      font-size: 14px;
      outline: none;
    }

    .search-wrap input:focus { border-color: rgba(var(--wc-bleu-vif-rgb), 0.5); }

    .count-badge {
      font-size: 13px;
      color: #4a6fa5;
      white-space: nowrap;
    }

    /* Brief cards */
    .briefs-list { display: flex; flex-direction: column; gap: 12px; }

    .brief-card {
      background: rgba(15, 25, 50, 0.6);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.15);
      border-radius: var(--wc-r-m);
      padding: 20px 24px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }

    .brief-card:hover { border-color: rgba(var(--wc-bleu-vif-rgb), 0.35); background: rgba(15, 25, 50, 0.8); }

    .brief-card.expanded { border-color: rgba(var(--wc-bleu-vif-rgb), 0.4); }

    .brief-header {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .brief-avatar {
      width: 40px;
      height: 40px;
      background: rgba(var(--wc-bleu-vif-rgb), 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: var(--wc-bleu-vif);
      flex-shrink: 0;
    }

    .brief-main { flex: 1; min-width: 0; }

    .brief-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--wc-texte-bleute);
    }

    .brief-meta {
      font-size: 13px;
      color: #4a6fa5;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brief-right {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .brief-date {
      font-size: 12px;
      color: #4a6fa5;
      text-align: right;
    }

    .services-badges {
      display: flex;
      gap: 6px;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: var(--wc-r-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .badge-video { background: rgba(var(--wc-bleu-vif-rgb), 0.15); color: var(--wc-bleu-clair); }
    .badge-photo { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
    .badge-drone { background: rgba(16, 185, 129, 0.15); color: var(--wc-emeraude); }

    /* Status badges */
    .status-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: var(--wc-r-xl);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .status-pending   { background: rgba(251, 191, 36, 0.15); color: var(--wc-ambre); border: 1px solid rgba(251,191,36,0.25); }
    .status-accepted  { background: rgba(var(--wc-bleu-vif-rgb), 0.15); color: var(--wc-bleu-clair); border: 1px solid rgba(var(--wc-bleu-vif-rgb),0.25); }
    .status-completed { background: rgba(16, 185, 129, 0.15); color: var(--wc-emeraude); border: 1px solid rgba(16,185,129,0.25); }
    .status-cancelled { background: rgba(239, 68, 68, 0.12); color: var(--wc-rouge-clair); border: 1px solid rgba(239,68,68,0.2); }

    /* Border accent by status */
    .brief-card.s-accepted  { border-color: rgba(var(--wc-bleu-vif-rgb), 0.35); }
    .brief-card.s-completed { border-color: rgba(16, 185, 129, 0.35); }
    .brief-card.s-cancelled { border-color: rgba(239, 68, 68, 0.2); opacity: 0.7; }

    /* Status action buttons */
    .btn-accept   { background: rgba(var(--wc-bleu-vif-rgb), 0.12); border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.3); color: var(--wc-bleu-clair); }
    .btn-accept:hover   { background: rgba(var(--wc-bleu-vif-rgb), 0.22); }
    .btn-complete { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--wc-emeraude); }
    .btn-complete:hover { background: rgba(16, 185, 129, 0.22); }
    .btn-cancel   { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); color: var(--wc-ambre); }
    .btn-cancel:hover   { background: rgba(251, 191, 36, 0.18); }

    /* Filter tabs */
    .filter-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .filter-tab {
      padding: 6px 14px;
      border-radius: var(--wc-r-xl);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.15);
      background: transparent;
      color: #4a6fa5;
      font-family: inherit;
      transition: all 0.15s;
    }

    .filter-tab:hover { border-color: rgba(var(--wc-bleu-vif-rgb), 0.35); color: #7ab3f0; }
    .filter-tab.active { background: rgba(var(--wc-bleu-vif-rgb), 0.15); border-color: rgba(var(--wc-bleu-vif-rgb), 0.4); color: var(--wc-texte-bleute); }

    .chevron {
      color: #4a6fa5;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .brief-card.expanded .chevron { transform: rotate(180deg); }

    /* Expanded detail */
    .brief-detail {
      display: none;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.1);
    }

    .brief-card.expanded .brief-detail { display: block; }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }

    .detail-field label {
      font-size: var(--wc-etiquette-taille);
      font-weight: var(--wc-etiquette-graisse);
      color: var(--wc-etiquette-couleur);
      text-transform: var(--wc-etiquette-casse);
      letter-spacing: var(--wc-etiquette-espacement);
      display: block;
      margin-bottom: 4px;
    }

    .detail-field span {
      font-size: 14px;
      color: var(--wc-texte-doux);
    }

    .detail-notes {
      background: rgba(10, 18, 40, 0.6);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.1);
      border-radius: var(--wc-r-s);
      padding: 12px 16px;
      font-size: 14px;
      color: #a0bce0;
      line-height: 1.6;
      white-space: pre-wrap;
      margin-top: 12px;
    }

    .detail-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }

    /* Empty state */
    .empty-state {
      text-align: center;
      padding: 80px 24px;
      display: none;
    }

    .empty-state.visible { display: block; }

    .empty-icon {
      width: 60px;
      height: 60px;
      background: rgba(var(--wc-bleu-vif-rgb), 0.08);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: var(--wc-bleu-vif);
    }

    .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--wc-texte-bleute); margin-bottom: 8px; }
    .empty-state p { font-size: 14px; color: #4a6fa5; }

    @media (max-width: 600px) {
      main { padding: 24px 16px 60px; }
      .brief-right { display: none; }
      .detail-grid { grid-template-columns: 1fr 1fr; }
    }
  
    /* ─── Standard Nav (logo | titre | id) ─── */
    nav {
      position: sticky; top: 0; z-index: 1000;
      height: 64px;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    nav .brand { justify-self: start; display: inline-flex; align-items: center; height: 100%; }
    nav .brand img { height: 24px; display: block; }
    nav .nav-pill {
      justify-self: center;
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wc-r-pilule);
      max-width: 60vw;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1;
    }
    nav .nav-user {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }
    nav .nav-user:hover { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.3); color: var(--wc-red); }
    nav .nav-user .x { opacity: 0.5; font-size: 10px; }
    nav .nav-clock {
      justify-self: end;
      font-size: 18px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wc-texte-bleute);
      text-shadow: 0 0 8px rgba(var(--wc-bleu-clair-rgb),0.45), 0 0 40px rgba(var(--wc-bleu-vif-rgb),0.35);
      line-height: 1;
    }
    nav .nav-timer {
      justify-self: center;
      font-size: 22px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--wc-texte-bleute); letter-spacing: 0.04em;
      line-height: 1;
    }
    @media (max-width: 600px) {
      nav { padding: 0 14px; height: 56px; }
      nav .brand img { height: 13px; }
      nav .nav-pill { font-size: 9px; padding: 4px 8px; max-width: 50vw; }
      nav .nav-user { font-size: 10px; padding: 4px 11px; }
    }
    /* ─── Footer ─── */
    .page-footer {
      padding: 18px 32px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex; justify-content: center; align-items: center;
      font-size: 12px; color: rgba(255,255,255,0.3);
      margin-top: auto;
    }
    .page-footer a { color: rgba(255,255,255,0.3); text-decoration: none; }
    .page-footer a:hover { color: rgba(255,255,255,0.6); }