/* ==========================================================================
   stats.css : le tableau de bord (stats.php), chargé après style.css.
   Feuille reprise du site Studio B, branchée sur les jetons du portfolio.
   ========================================================================== */

/* ---- Pont : les noms de variables de Studio B, servis par la charte d'ici --- */
.admin, .porte {
  --paper: var(--bg);
  --raise: var(--bg-elev);
  --ink-2: var(--ink-soft);
  --ink-3: var(--ink-mute);
  --rule: var(--line);
  --blue: var(--accent);
  --blue-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --ll: #ac115d;
  --dh: var(--accent-2);
  --pm: var(--ink);
  --f-ui: var(--font-sans);
  --f-mono: var(--font-mono);
}
body.admin { background: var(--bg); color: var(--ink); }

/* Classes de mise en page empruntées au même site. */
.admin .wrap, .porte .wrap { max-width: 1280px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.admin .mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.admin .chip, .porte .chip { font: 500 14px var(--f-ui); border: 1px solid var(--rule); background: transparent;
  color: var(--ink-2); padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: all .25s var(--ease); display: inline-flex; gap: 8px; align-items: center; }
.admin .chip:hover { border-color: var(--blue); color: var(--blue); }
.admin .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; padding: 3px 7px;
  border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.admin .tag.ll { color: var(--ll); } .admin .tag.dh { color: var(--dh); }
.admin .tag.ipm { color: var(--blue); } .admin .tag.perso { color: var(--accent-2); }
.porte .logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.porte .logo b { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; color: var(--blue); }
.admin h1, .admin h2, .admin h3, .porte h1 { font-family: var(--font-display); }


.admin{min-height:100vh}
.chiffre{font-variant-numeric:tabular-nums}
.bouton{font:500 14px var(--f-ui);border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:7px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background .25s,border-color .25s}
.bouton:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.admin a.chip{text-decoration:none}

/* ---- Porte d'entrée ----------------------------------------------------- */
.porte{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(60vmax 60vmax at 85% 10%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%)}
.porte-carte{width:min(440px,100%);padding:36px;border-radius:20px;background:var(--raise);border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 48px -24px rgba(0,0,0,.25)}
.porte-carte h1{margin:28px 0 12px;font-size:40px;line-height:1;letter-spacing:-.035em;font-weight:900}
.porte-carte h1 em{color:var(--blue)}
.porte-carte p{color:var(--ink-2);font-size:15px}
.porte-form{display:grid;gap:8px;margin-top:20px}
.porte-form label{font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:8px}
.porte-form input{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:400 16px/1 var(--f-ui)}
.porte-form input:focus{outline:2px solid var(--blue);outline-offset:1px}
.porte-form .bouton{justify-content:center;margin-top:12px;min-height:46px}
.porte-ligne{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;gap:12px}
.porte-ligne > div{display:grid;gap:8px}
.porte-ligne .bouton{margin-top:0}
.porte-erreur{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--dh) 14%,transparent);color:var(--dh);font-size:14px}
.porte-pied{margin:20px 0 0;font-size:14px}

/* ---- En-tête ------------------------------------------------------------ */
.admin-tete{padding-block:40px 8px}
.admin-haut{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.admin-sur{color:var(--ink-3);margin:0 0 12px}
.admin-titre{margin:0;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.035em;font-weight:900}
.admin-titre em{color:var(--blue)}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-actions form{margin:0}
.admin-message{margin:18px 0 0;padding:12px 16px;border-radius:12px;background:var(--blue-soft);color:var(--ink)}
.bloc-mdp{margin-top:20px;padding:20px;border-radius:16px;background:var(--raise);border:1px solid var(--rule)}
.bloc-mdp h2{margin:0;font-size:18px}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:32px 0 12px}
.kpis > div{padding:16px;border-radius:14px;background:var(--raise);border:1px solid var(--rule);display:flex;flex-direction:column}
.kpis dt{font:500 11px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);order:1}
.kpis dd{margin:10px 0 6px;font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1;order:2}
.kpis small{font-size:12px;color:var(--ink-3);order:3}
.kpi-direct{background:var(--blue)!important;border-color:var(--blue)!important}
.kpi-direct dt,.kpi-direct small{color:rgba(255,255,255,.85)}
.kpi-direct dd{color:#fff}
.kpi-direct dt::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.kpi-accent{border-color:var(--blue)!important;background:var(--blue-soft)!important}
.kpi-accent dd{color:var(--blue)}
.admin-note{margin:0;font-size:13px;color:var(--ink-3)}

/* ---- Blocs -------------------------------------------------------------- */
.admin-corps{padding-block:8px 64px}
.s-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.s-trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.s-grille,.s-trois{grid-template-columns:1fr}}
.s-bloc{margin-top:16px;padding:24px;border-radius:16px;background:var(--raise);border:1px solid var(--rule);min-width:0}
.s-fort{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.s-bloc h2{margin:0 0 8px;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.s-h3{margin:20px 0 10px;font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.s-sous{margin:0 0 16px;font-size:14px;color:var(--ink-2);max-width:60em}
.s-legende{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.p-vues,.p-uniques{display:inline-block;width:12px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--blue) 28%,transparent)}
.p-uniques{background:var(--blue);margin-left:10px}
.jauges-deux{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 40px}
@media (max-width:760px){.jauges-deux{grid-template-columns:1fr}}

.histo{display:block;width:100%;height:auto;margin-top:8px}
.h-vues{fill:color-mix(in srgb,var(--blue) 26%,transparent)}
.h-uniques,.h-bureau{fill:var(--blue)}
.h-date{fill:var(--ink-3);font:400 9px var(--f-mono)}
.histo g:hover .h-vues{fill:color-mix(in srgb,var(--blue) 50%,transparent)}
.histo g:hover .h-bureau{fill:var(--electric-3)}

.jauges{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jauges li{display:grid;grid-template-columns:minmax(110px,40%) 1fr auto;align-items:center;gap:12px;font-size:14px}
.jauges-projets{counter-reset:p}
.jauges-projets li{grid-template-columns:28px minmax(140px,44%) 1fr auto;counter-increment:p}
.jauges-projets li::before{content:counter(p,decimal-leading-zero);font:400 11px var(--f-mono);color:var(--ink-3)}
.j-nom{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-nom .tag{font-size:10px;padding:1px 5px;flex:none}
.tag.labo{color:var(--blue)}
.j-val{font-size:13px;text-align:right;white-space:nowrap}
.j-val small{color:var(--ink-3)}
meter{width:100%;height:8px;border:0;border-radius:99px;background:var(--rule);-webkit-appearance:none;appearance:none}
meter::-webkit-meter-bar{background:var(--rule);border:0;border-radius:99px;height:8px}
meter::-webkit-meter-optimum-value{background:var(--blue);border-radius:99px}
meter::-moz-meter-bar{background:var(--blue);border-radius:99px}
.vide{margin:0;color:var(--ink-3);font-size:14px}

.anneau{display:flex;align-items:center;gap:20px}
.anneau svg{width:120px;height:120px;flex:0 0 auto}
.anneau-total{fill:var(--ink);font:500 15px var(--f-mono)}
.anneau ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;flex:1;min-width:0}
.anneau li{display:flex;align-items:center;gap:8px}
.anneau li svg{width:10px;height:10px}
.anneau li b{margin-left:auto;font-size:13px;font-weight:500}
.admin-pied{margin:32px 0 0;font-size:13px;color:var(--ink-3)}

@media (max-width:575.98px){
  .jauges li{grid-template-columns:1fr auto}
  .jauges meter{grid-column:1 / -1;grid-row:2}
  .jauges-projets li{grid-template-columns:24px 1fr auto}
  .jauges-projets meter{grid-column:2 / -1}
  .anneau{flex-direction:column;align-items:flex-start}
  .anneau ul{width:100%}
  .porte-carte{padding:24px}
}