:root{--blue:#153f63;--blue2:#1f4e79;--mcp:#5b2333;--mcp2:#9b2f45;--bg:#f3f6fa;--card:#fff;--text:#172033;--muted:#6b7280;--line:#e5e7eb;--green:#d8f3dc;--red:#fde2e2;--orange:#fff3cd;--future:#fff7e6}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.public-header{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;padding:22px 26px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.public-header strong{display:block;font-size:1.45rem}.public-header span{opacity:.85}.public-header a{color:white;text-decoration:none;background:rgba(255,255,255,.15);padding:8px 12px;border-radius:10px}
body.mcp-mode .public-header{background:linear-gradient(135deg,var(--mcp),var(--mcp2))}
.container{max-width:1500px;margin:auto;padding:22px}
.intro-card,.main-panel,.selection-card{background:var(--card);border-radius:18px;box-shadow:0 8px 24px rgba(20,30,50,.08);padding:18px}
.intro-card{margin-bottom:14px}
h1,h2,h3{margin:0 0 10px}p{margin:0;color:var(--muted)}
.tabs{display:flex;gap:8px;margin:14px 0 18px;background:white;padding:8px;border-radius:16px;box-shadow:0 4px 18px rgba(20,30,50,.06);width:max-content;max-width:100%;overflow:auto}
button{border:0;border-radius:11px;background:var(--blue2);color:white;padding:10px 14px;cursor:pointer;white-space:nowrap}
button:disabled{opacity:.6;cursor:not-allowed}
body.mcp-mode button{background:var(--mcp2)}
.tab{background:transparent;color:var(--blue2)}.tab.active{background:var(--blue2);color:white}
body.mcp-mode .tab{color:var(--mcp)}body.mcp-mode .tab.active{background:var(--mcp2);color:white}
.secondary{background:#edf3f8;color:var(--blue2)}body.mcp-mode .secondary{background:#f7edf0;color:var(--mcp)}
.layout{display:grid;grid-template-columns:1fr 390px;gap:18px;align-items:start}
.toolbar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:10px;margin-bottom:16px}
input,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:11px;background:white}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.unit-card{border:1px solid var(--line);border-radius:16px;background:#fbfdff;overflow:hidden;display:flex;flex-direction:column}
body.mcp-mode .unit-card{background:#fffafb}
.future-card{background:var(--future)!important;border-color:#f1c36d}

/* Images carrées */
.unit-img{
  width:100%;
  aspect-ratio:1 / 1;
  background:#edf3f8;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.mcp-mode .unit-img{background:#f7edf0}
.future-card .unit-img{background:#fff0cc}
.unit-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.unit-card:hover .unit-img img{
  transform:scale(1.04);
}

.unit-content{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.unit-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.unit-title h3{margin:0;font-size:1.05rem}
.meta{color:var(--muted);font-size:.92rem}
.badges{display:flex;flex-wrap:wrap;gap:6px}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.82rem;background:#eef4fa;color:var(--blue2)}
body.mcp-mode .badge{background:#f7edf0;color:var(--mcp)}.ok{background:var(--green);color:#1d4d2a}.bad{background:var(--red);color:#842029}.warn{background:var(--orange);color:#664d03}
.details{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;display:none}.details.open{display:block}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.selection-panel{position:sticky;top:18px}
.selection-title{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.small-btn{padding:7px 10px}
.selection-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.selection-list{display:flex;flex-direction:column;gap:8px;min-height:40px;margin-bottom:12px}
.selection-item{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fbfdff}
.selection-item-title{display:flex;justify-content:space-between;gap:8px}
.remove-btn{padding:4px 8px;font-size:.82rem;background:#fde2e2!important;color:#842029!important}
.copy-btn{width:100%;margin-top:12px}.feedback{margin-top:8px;font-size:.9rem;color:#1d4d2a}.empty{color:var(--muted);font-style:italic}
.type-summary{border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0;background:#fbfdff}.type-summary h4{margin:0 0 8px}
.type-row,.counter-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}.type-row:last-child,.counter-row:last-child{border-bottom:0}
.counter{margin-bottom:8px}
@media(max-width:1200px){.layout{grid-template-columns:1fr}.selection-panel{position:static}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.toolbar{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.container{padding:12px}}
/* FIX images carrées - à placer tout à la fin */
.cards .unit-card .unit-img{
  height:auto !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
}

.cards .unit-card .unit-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* V19 - images carrées public */
.cards .unit-card .unit-img{
  height:auto!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
}
.cards .unit-card .unit-img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.unit-img.no-image{
  color:#6b7280;
  font-size:.9rem;
}


/* V19.1 - footer commun */
.app-footer{
  max-width:1500px;
  margin:24px auto 0;
  padding:14px 22px 24px;
  color:#6b7280;
  font-size:.9rem;
  text-align:center;
}
.logout{
  background:rgba(255,255,255,.22)!important;
}
/* V20 - page publique avancement */
.public-progress-detail{
  max-width:720px;
  margin:auto;
}

.progress-public-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:0 8px 24px rgba(20,30,50,.08);
}

.progress-public-main{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-bottom:14px;
}

.progress-public-main strong{
  font-size:3rem;
  line-height:1;
  color:var(--blue2);
}

.progress-public-main span{
  color:var(--muted);
  padding-bottom:5px;
}

.progress-bar.public{
  height:14px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin:12px 0 18px;
}

.progress-bar.public span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--blue2),var(--mcp2));
}

.progress-public-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.progress-public-grid div{
  background:#f8fafc;
  border-radius:14px;
  padding:12px;
}

.progress-public-grid span{
  display:block;
  color:var(--muted);
  font-size:.86rem;
}

.progress-public-grid strong{
  display:block;
  font-size:1.25rem;
  margin-top:4px;
}

@media(max-width:800px){
  .progress-public-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* V21 - statut sur page publique progression */
.progress-public-status{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  margin-bottom:14px;
}
.progress-public-status span{color:var(--muted);font-size:.9rem}
.progress-public-status strong{color:var(--blue2)}
.progress-status{color:var(--muted);font-size:.9rem;margin:6px 0 2px}
.progress-status strong{color:var(--text)}