/* ==========================================================================
   Admirez-nous — Suivi de production
   Charte V1.0 : Noir 60 / Blanc 30 / Vert signal 10. Mobile-first.
   ========================================================================== */

:root{
  --noir:#0A0A0A;
  --blanc:#FFFFFF;
  --signal:#CCFF00;

  --surface-1:#111111;
  --surface-2:#171717;
  --surface-3:#1F1F1F;

  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.62);
  --text-3:rgba(255,255,255,.38);

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --ok:#6EE7B7;
  --warn:#FFB86B;
  --alert:#FF6B6B;
  --info:#7CE0FF;
  --violet:#A78BFA;

  --r:12px;
  --r-sm:8px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--noir);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:80px;
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:'Unbounded',system-ui,sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.01em;}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:'Unbounded',sans-serif;font-weight:800;font-size:13px;letter-spacing:-.02em;}
.logo em{color:var(--signal);font-style:normal;}
.header .spacer{flex:1;}
.header .out{font-size:12px;color:var(--text-3);}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:var(--header-h);z-index:40;
  display:flex;gap:4px;overflow-x:auto;
  padding:10px 16px;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  flex:0 0 auto;
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--text-2);
  border:1px solid transparent;
  transition:all .2s var(--ease);
  white-space:nowrap;
}
.nav a:hover{color:var(--text);background:var(--surface-2);}
.nav a.on{background:var(--signal);color:var(--noir);font-weight:600;}

/* ---------- Layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:20px 16px 40px;}
.page-head{margin-bottom:20px;}
.page-head h1{font-size:22px;margin-bottom:4px;}
.page-head p{color:var(--text-2);font-size:13px;}
.kicker{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin-bottom:8px;display:block;
}

/* ---------- Cartes ---------- */
.card{
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
}
.card + .card{margin-top:12px;}
.card h2{font-size:15px;margin-bottom:12px;}
.card h3{font-size:13px;margin-bottom:10px;}

.grid{display:grid;gap:12px;}
.grid-kpi{grid-template-columns:repeat(2,1fr);}
@media(min-width:720px){.grid-kpi{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr;}}

/* ---------- KPI ---------- */
.kpi{
  background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;
}
.kpi .lab{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.kpi .val{font-family:'Unbounded',sans-serif;font-size:30px;font-weight:800;line-height:1;margin:8px 0 4px;}
.kpi .sub{font-size:12px;color:var(--text-2);}
.kpi.signal .val{color:var(--signal);}
.kpi.alert .val{color:var(--alert);}
.kpi.warn  .val{color:var(--warn);}
.kpi.ok    .val{color:var(--ok);}

/* ---------- Ligne client ---------- */
.client-row{
  display:block;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-left:3px solid var(--signal);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:10px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.client-row:hover{background:var(--surface-2);border-color:var(--line-2);}
.client-row .top{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.client-row .nom{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;flex:1;}
.client-row .avance{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:15px;
  white-space:nowrap;
}
.a-ok{color:var(--ok);} .a-warn{color:var(--warn);} .a-alert{color:var(--alert);}

/* ---------- Barre de progression ---------- */
.bar{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;display:flex;}
.bar span{display:block;height:100%;}
.bar .b-publie{background:var(--ok);}
.bar .b-prog{background:var(--signal);}
.bar .b-pret{background:var(--violet);}
.bar .b-cours{background:var(--info);}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-2);margin-top:8px;}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;}

/* ---------- Puces / badges ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:3px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--text-2);
  white-space:nowrap;
}
.tag.sig{border-color:rgba(204,255,0,.4);color:var(--signal);}
.tag.alert{border-color:rgba(255,107,107,.45);color:var(--alert);}
.tag.warn{border-color:rgba(255,184,107,.45);color:var(--warn);}
.tag.ok{border-color:rgba(110,231,183,.45);color:var(--ok);}
.tags{display:flex;flex-wrap:wrap;gap:6px;}

.st-todo   {border-color:var(--line-2);color:var(--text-2);}
.st-doing  {border-color:rgba(124,224,255,.45);color:var(--info);}
.st-review {border-color:rgba(255,184,107,.45);color:var(--warn);}
.st-ok     {border-color:rgba(167,139,250,.5);color:var(--violet);}
.st-planned{border-color:rgba(204,255,0,.45);color:var(--signal);}
.st-done   {border-color:rgba(110,231,183,.45);color:var(--ok);}

.res{
  font-size:9px;font-weight:700;letter-spacing:.06em;
  padding:2px 5px;border-radius:4px;
  background:var(--surface-3);color:var(--text-2);
}

/* ---------- Alertes ---------- */
.alerte{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);margin-bottom:6px;
}
.alerte.alert{border-left:2px solid var(--alert);}
.alerte.warn{border-left:2px solid var(--warn);}

/* ---------- Liste de posts ---------- */
.post{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.post:last-child{border-bottom:none;}
.post .jour{
  flex:0 0 46px;text-align:center;
}
.post .jour b{display:block;font-family:'Unbounded',sans-serif;font-size:16px;line-height:1;}
.post .jour span{font-size:10px;color:var(--text-3);text-transform:uppercase;}
.post .corps{flex:1;min-width:0;}
.post .titre{font-weight:600;font-size:14px;margin-bottom:5px;}
.post .titre.vide{color:var(--text-3);font-weight:400;font-style:italic;}
.post .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.post.retard{background:rgba(255,107,107,.05);border-radius:var(--r-sm);padding-left:8px;padding-right:8px;}

/* ---------- Matrice planning ---------- */
.matrice-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;}
.matrice{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:12px;}
.matrice th,.matrice td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;}
.matrice th{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.matrice th.sem-now{color:var(--signal);}
.matrice td.cl,.matrice th.cl{
  text-align:left;position:sticky;left:0;background:var(--noir);z-index:2;
  min-width:130px;max-width:130px;
}
.matrice td.cl a{font-weight:600;font-size:12px;}
.cell{display:flex;gap:3px;justify-content:center;align-items:center;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);}
.dot.d-publie{background:var(--ok);border-color:var(--ok);}
.dot.d-prog{background:var(--signal);border-color:var(--signal);}
.dot.d-pret{background:var(--violet);border-color:var(--violet);}
.dot.d-cours{background:var(--info);border-color:var(--info);}
.dot.d-vide{background:transparent;border-style:dashed;border-color:var(--alert);}

/* ---------- Cycle mensuel ---------- */
.jalons{display:flex;gap:4px;flex-wrap:wrap;}
.jalon{
  flex:1;min-width:58px;
  text-align:center;font-size:9px;font-weight:600;letter-spacing:.04em;
  padding:7px 4px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-3);
  border:1px solid var(--line);
  text-transform:uppercase;cursor:pointer;
  transition:all .18s var(--ease);
}
.jalon.on{background:var(--signal);color:var(--noir);border-color:var(--signal);}
.jalon:hover{border-color:var(--line-2);}

/* ---------- Formulaires ---------- */
label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px;}
input[type=text],input[type=date],input[type=number],input[type=password],input[type=url],select,textarea{
  width:100%;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  outline:none;transition:border-color .2s var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--signal);}
textarea{min-height:70px;resize:vertical;}
.field{margin-bottom:14px;}
.fields{display:grid;gap:12px;}
@media(min-width:640px){.fields.f2{grid-template-columns:1fr 1fr;}.fields.f3{grid-template-columns:repeat(3,1fr);}}

.checks{display:flex;flex-wrap:wrap;gap:8px;}
.check{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:12px;cursor:pointer;text-transform:none;letter-spacing:0;
  color:var(--text-2);margin:0;font-weight:500;
}
.check input{accent-color:var(--signal);margin:0;width:auto;}
.check:has(input:checked){border-color:var(--signal);color:var(--signal);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:var(--r-pill);
  background:var(--signal);color:var(--noir);
  font-size:13px;font-weight:700;border:none;cursor:pointer;
  transition:transform .15s var(--ease),opacity .2s;
}
.btn:hover{transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);font-weight:500;}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal);}
.btn.sm{padding:6px 12px;font-size:11px;}
.btn.danger{background:transparent;border:1px solid rgba(255,107,107,.5);color:var(--alert);font-weight:500;}
.row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}

select.mini{
  width:auto;padding:4px 8px;font-size:11px;border-radius:var(--r-pill);
  background:var(--surface-2);
}

/* ---------- Divers ---------- */
.flash{
  background:rgba(204,255,0,.1);border:1px solid rgba(204,255,0,.35);
  color:var(--signal);padding:10px 14px;border-radius:var(--r-sm);
  font-size:13px;margin-bottom:16px;
}
.etat-vide{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;}
.sep{height:1px;background:var(--line);margin:16px 0;}
details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);padding:8px 0;}
details summary:hover{color:var(--signal);}
.mut{color:var(--text-2);font-size:12px;}
.mut-3{color:var(--text-3);font-size:11px;}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login .box{width:100%;max-width:340px;text-align:center;}
.login h1{font-size:20px;margin:20px 0 6px;}
.login p{color:var(--text-2);font-size:13px;margin-bottom:24px;}
.erreur{color:var(--alert);font-size:12px;margin-top:10px;}

/* ---------- Barre d'action mobile ---------- */
.sticky-actions{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;gap:8px;padding:12px 16px;
  background:rgba(10,10,10,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.sticky-actions .btn{flex:1;}
@media(min-width:900px){.sticky-actions{position:static;background:none;border:none;padding:16px 0 0;}
  .sticky-actions .btn{flex:0 0 auto;}}

/* ==========================================================================
   DESKTOP — l'outil se travaille autant assis devant un écran large
   qu'en déplacement. Au-delà de 1024px on densifie au lieu d'étirer.
   ========================================================================== */

@media(min-width:1024px){
  body{font-size:15.5px;padding-bottom:0;}
  .header{height:68px;padding:0 32px;}
  .logo{font-size:14px;}
  .nav{padding:12px 32px;gap:6px;}
  .nav a{font-size:13.5px;padding:8px 16px;}
  .wrap{padding:32px 32px 64px;}

  .page-head{margin-bottom:26px;}
  .page-head h1{font-size:30px;}
  .page-head p{font-size:14px;}

  .grid{gap:16px;}
  .kpi{padding:18px 20px;}
  .kpi .val{font-size:36px;}
  .card{padding:20px 24px;}
  .card + .card{margin-top:16px;}
  .client-row{padding:16px 20px;}

  .matrice{font-size:12.5px;}
  .matrice th,.matrice td{padding:10px 8px;}
  .matrice td.cl,.matrice th.cl{min-width:170px;max-width:170px;}
  .dot{width:10px;height:10px;}
  .matrice-wrap{margin:0;padding:0;}
}

/* Au-delà de 1200px, la ligne client passe en colonnes : nom / avancement / alertes.
   On lit les 15 clients d'un coup d'œil sans scroller. */
@media(min-width:1200px){
  .dash-list .client-row{
    display:grid;
    grid-template-columns:220px minmax(240px,1fr) minmax(260px,.9fr);
    grid-template-rows:auto auto;
    column-gap:28px;
    align-items:center;
  }
  .dash-list .client-row .top{
    grid-column:1;grid-row:1/3;
    flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:0;
  }
  .dash-list .client-row .bar   {grid-column:2;grid-row:1;align-self:end;}
  .dash-list .client-row .legend{grid-column:2;grid-row:2;margin-top:7px;align-self:start;}
  .dash-list .client-row .tags  {grid-column:3;grid-row:1/3;margin-top:0 !important;justify-content:flex-end;}
}

/* Écrans très larges : on borne la lecture plutôt que d'étaler le texte. */
@media(min-width:1600px){
  .wrap{max-width:1480px;}
}