/* AO Finder — feuille de style extraite du design Claude Design
   (AO Finder.dc.html, projet « AO Finder - Design webapp »).
   Tokens : crème #F5EFDD · encre #1C1B17 · jaune #FFD23F ·
   vert #157F4E (ouvert) · orange #C2680E (renouvellement) · indigo #4B4BC7 (attribution). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Instrument Sans', sans-serif; background: #F5EFDD; color: #1C1B17;
       -webkit-font-smoothing: antialiased; }
a { color: #1C1B17; text-decoration: none; }
a:hover { color: #8A6D00; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D9D0B8; border-radius: 10px; border: 3px solid #F5EFDD; }
@keyframes aoPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
           display: flex; flex-direction: column; padding: 22px 16px;
           border-right: 1px solid #E4DBC3; background: #FBF7EC; }
.marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.marque .logo { width: 34px; height: 34px; border-radius: 9px; background: #1C1B17;
                display: flex; align-items: center; justify-content: center; }
.marque .logo div { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #FFD23F; }
.marque .nom { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
               letter-spacing: -.02em; line-height: 1.05; }
.marque .sous { font-size: 10.5px; color: #9A9382; letter-spacing: .08em; text-transform: uppercase; }
.nav-titre { font-size: 10.5px; color: #A69E88; letter-spacing: .1em; text-transform: uppercase;
             padding: 8px 10px 6px; }
.nav-item { width: 100%; text-align: left; border: none; cursor: pointer; display: flex;
            align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px;
            font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 500;
            background: transparent; color: #4A463C; }
.nav-item.actif { font-weight: 600; background: #FFD23F; color: #1C1B17; }
.nav-item .badge { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 11px;
                   color: #fff; border-radius: 20px; padding: 1px 7px; }
.badge-vert { background: #157F4E; } .badge-orange { background: #C2680E; }
.badge-indigo { background: #4B4BC7; }
.carte-vertical { margin-top: auto; display: flex; align-items: center; gap: 10px;
                  padding: 11px; border-radius: 12px; background: #F1E9D3;
                  border: 1px solid #E4DBC3; }
.carte-vertical .pastille { width: 34px; height: 34px; border-radius: 9px; background: #FFD23F;
                            display: flex; align-items: center; justify-content: center;
                            font-family: 'Space Grotesk', sans-serif; font-weight: 700;
                            font-size: 14px; }

/* Topbar & page */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
          padding: 14px 32px; background: rgba(245,239,221,.86); backdrop-filter: blur(8px);
          border-bottom: 1px solid #E4DBC3; }
.collecte { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #7A756A;
            margin-left: auto; }
.collecte .point { width: 7px; height: 7px; border-radius: 50%; background: #157F4E;
                   animation: aoPulse 2.4s infinite; }
.avatar { width: 38px; height: 38px; border-radius: 11px; background: #1C1B17; color: #FFD23F;
          display: flex; align-items: center; justify-content: center;
          font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; }
.page { padding: 30px 32px 48px; flex: 1; }
h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700;
     letter-spacing: -.025em; }
.sous-titre { margin: 6px 0 0; color: #7A756A; font-size: 14.5px; }

/* Cartes & KPI */
.carte { background: #fff; border: 1px solid #EAE3D2; border-radius: 16px;
         box-shadow: 0 1px 2px rgba(28,27,23,.04); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 22px; }
.kpi { padding: 18px 20px; }
.kpi .libelle { display: flex; align-items: center; gap: 8px; color: #7A756A;
                font-size: 12.5px; font-weight: 600; }
.kpi .valeur { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 700;
               letter-spacing: -.03em; margin-top: 8px; }
.kpi .note { font-size: 12.5px; font-weight: 600; margin-top: 2px; color: #7A756A; }
.kpi-sombre { background: #1C1B17; border-color: #1C1B17; color: #fff;
              box-shadow: 0 8px 24px -14px rgba(28,27,23,.6); }
.kpi-sombre .libelle { color: #C9C2AE; }
.puce { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.puce-vert { background: #157F4E; } .puce-orange { background: #C2680E; }
.puce-indigo { background: #4B4BC7; } .puce-jaune { background: #FFD23F; }

/* Lignes de marché */
.ligne-marche { display: flex; align-items: center; gap: 14px; padding: 14px 20px;
                border-top: 1px solid #F0EAD9; cursor: pointer; color: inherit; }
.ligne-marche:hover { background: #FBF7EC; color: inherit; }
.score-bloc { width: 46px; text-align: center; flex-shrink: 0; }
.score-bloc .val { font-family: 'Space Mono', monospace; font-size: 19px; font-weight: 700; }
.score-bloc .lib { font-size: 9px; color: #B4AB92; letter-spacing: .06em; }
.pill-source { font-family: 'Space Mono', monospace; font-size: 10.5px; color: #8A6D00;
               background: #FBF1CE; border-radius: 5px; padding: 1px 6px; }
.tag-kind { font-size: 11px; font-weight: 700; color: #fff; border-radius: 20px;
            padding: 3px 10px; letter-spacing: .02em; text-transform: uppercase; }
.kind-ouvert { background: #157F4E; } .kind-renouvellement { background: #C2680E; }
.kind-attribution { background: #4B4BC7; }

/* Boutons & formulaires */
.btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
       font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 14px;
       padding: 11px 18px; border-radius: 11px; }
.btn-jaune { background: #FFD23F; color: #1C1B17;
             box-shadow: 0 6px 16px -6px rgba(245,197,24,.9); }
.btn-clair { background: #FBF7EC; color: #1C1B17; border: 1px solid #E4DBC3; }
.champ { width: 100%; font-family: 'Instrument Sans', sans-serif; font-size: 14px;
         background: #fff; border: 1px solid #E4DBC3; border-radius: 11px; padding: 11px 13px; }
.champ:focus { outline: 2px solid #FFD23F; border-color: #FFD23F; }

/* Chips mots-clés */
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
        font-weight: 600; background: #fff; border: 1px solid #E4DBC3; border-radius: 8px;
        padding: 5px 11px; cursor: pointer; }
.chip.inactif { opacity: .45; text-decoration: line-through; }
.chip .type { font-family: 'Space Mono', monospace; font-size: 9.5px; color: #9A9382;
              text-transform: uppercase; }
.chip.custom { border-color: #F0E2A8; background: #FBF1CE; }

/* Panneau « pourquoi » */
.pourquoi { background: #FBF1CE; border: 1px solid #F0E2A8; border-radius: 14px;
            padding: 18px 20px; margin-bottom: 22px; }

/* Login */
.login-fond { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-carte { width: 380px; padding: 34px; }

table.donnees { width: 100%; border-collapse: collapse; }
table.donnees th { font-size: 11px; color: #A69E88; letter-spacing: .06em;
                   text-transform: uppercase; text-align: left; padding: 12px 8px;
                   border-bottom: 1px solid #F0EAD9; font-weight: 600; }
table.donnees td { padding: 13px 8px; border-bottom: 1px solid #F6F1E4; font-size: 13.5px; }