:root{
  --bg:#faf6f1;
  --bg-soft:#f2ebe2;
  --card:#ffffff;
  --ink:#3d3630;
  --ink-soft:#7a7168;
  --line:#e7ddd0;
  --accent:#c97b84;
  --accent-dark:#a85d66;
  --accent-soft:#f3dfe1;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 4px 18px rgba(61,54,48,0.07);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}

.app{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* HEADER */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  padding:0.9rem 1.5rem;
  position:sticky;
  top:0;
  z-index:20;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-weight:700;
  font-size:1.2rem;
  color:var(--accent-dark);
}
.brand-icon{font-size:1.5rem;}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin-left:auto;
}
.tab-btn{
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-size:0.95rem;
  padding:0.6rem 1rem;
  border-radius:999px;
  cursor:pointer;
  min-height:44px;
  transition:background .15s, color .15s;
}
.tab-btn:hover{background:var(--bg-soft);}
.tab-btn.active{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}

/* MAIN */
.content{
  flex:1;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:1.8rem 1.5rem 3rem;
}

.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.panel-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.3rem;
}
.panel-head h1{
  font-size:1.5rem;
  margin:0;
  color:var(--accent-dark);
}
.panel-sub{color:var(--ink-soft); margin-top:0.2rem; margin-bottom:1.5rem;}

/* BUTTONS */
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:0.7rem 1.4rem;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  transition:background .15s, transform .1s;
}
.btn-primary:hover{background:var(--accent-dark);}
.btn-primary:active{transform:scale(0.97);}

.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:999px;
  padding:0.7rem 1.3rem;
  font-size:0.9rem;
  cursor:pointer;
  min-height:44px;
}
.btn-ghost:hover{background:var(--bg-soft);}

.btn-danger{
  background:transparent;
  border:1px solid #d98b8b;
  color:#b34747;
  border-radius:999px;
  padding:0.7rem 1.3rem;
  font-size:0.9rem;
  cursor:pointer;
  min-height:44px;
}
.btn-danger:hover{background:#fbeaea;}

.btn-icon{
  background:transparent;
  border:none;
  font-size:1.1rem;
  color:var(--ink-soft);
  cursor:pointer;
  width:44px;
  height:44px;
  border-radius:50%;
}
.btn-icon:hover{background:var(--bg-soft);}

.btn-round{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  font-size:1.4rem;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-round:hover{background:var(--bg-soft);}
.btn-round-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-round-primary:hover{background:var(--accent-dark);}
.btn-round-lg{
  width:64px;
  height:64px;
  font-size:1.8rem;
}

/* EMPTY STATE */
.empty-state{
  background:var(--card);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:2.5rem 1.5rem;
  text-align:center;
  color:var(--ink-soft);
}
.empty-state p{margin:0.2rem 0;}
.empty-state .sub{font-size:0.9rem;}

/* PROJETS GRID */
.projets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.2rem;
  margin-top:1.5rem;
}
.projet-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.3rem;
  cursor:pointer;
  border-top:5px solid var(--accent);
  transition:transform .15s, box-shadow .15s;
}
.projet-card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(61,54,48,0.12);}
.projet-card h3{margin:0 0 0.5rem; font-size:1.1rem; color:var(--ink);}
.projet-card .projet-rangs{
  font-size:0.9rem;
  color:var(--ink-soft);
  margin-bottom:0.7rem;
}
.projet-card .progress-bar-track{height:8px;}

/* PROGRESS BAR */
.progress-bar-track{
  background:var(--bg-soft);
  border-radius:999px;
  height:10px;
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  background:var(--accent);
  border-radius:999px;
  width:0%;
  transition:width .2s ease;
}
.progress-text{font-size:0.8rem; color:var(--ink-soft); margin-top:0.3rem; display:block;}

/* OVERLAY / MODAL */
.overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(61,54,48,0.35);
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:50;
}
.overlay.active{display:flex;}
.modal{
  background:var(--card);
  border-radius:var(--radius);
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 10px 40px rgba(61,54,48,0.25);
}
.modal-large{max-width:560px;}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 1.4rem 0.8rem;
  border-bottom:1px solid var(--line);
}
.modal-head h2{margin:0; font-size:1.2rem; color:var(--accent-dark);}
.modal-body{padding:1.2rem 1.4rem;}
.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:0.7rem;
  padding:1rem 1.4rem 1.4rem;
}

/* FIELDS */
.field{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-bottom:1.1rem;
  font-size:0.9rem;
  color:var(--ink-soft);
}
.field input, .field textarea{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0.65rem 0.8rem;
  background:var(--bg);
  resize:vertical;
  min-height:44px;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.field-row{display:flex; gap:0.6rem;}
.field-row input{flex:1; min-width:0;}

.color-picker{display:flex; gap:0.6rem; flex-wrap:wrap;}
.color-dot{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
}
.color-dot.selected{border-color:var(--ink);}

/* DETAIL PROJET */
.detail-progress{
  background:var(--bg-soft);
  border-radius:var(--radius);
  padding:1.3rem;
  margin-bottom:1.2rem;
}
.rang-counter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-bottom:1rem;
}
.rang-display{display:flex; flex-direction:column; align-items:center;}
.rang-nombre{font-size:2.2rem; font-weight:700; color:var(--accent-dark);}
.rang-label{font-size:0.85rem; color:var(--ink-soft);}
.detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
  justify-content:flex-end;
  margin-top:1rem;
}

/* COMPTEUR */
.compteur-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.5rem 1.5rem;
  max-width:420px;
  margin:0 auto;
  text-align:center;
}
.compteur-value{
  font-size:4rem;
  font-weight:700;
  color:var(--accent-dark);
  margin-bottom:1.5rem;
}
.compteur-buttons{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-bottom:1.5rem;
}

/* MINUTEUR */
.minuteur-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.5rem 1.5rem;
  max-width:420px;
  margin:0 auto;
  text-align:center;
}
.minuteur-display{
  font-size:3.2rem;
  font-weight:700;
  color:var(--accent-dark);
  margin-bottom:1.3rem;
  font-variant-numeric:tabular-nums;
}
.minuteur-presets{
  display:flex;
  justify-content:center;
  gap:0.6rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.chip{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:999px;
  padding:0.5rem 1rem;
  font-size:0.85rem;
  cursor:pointer;
  min-height:44px;
}
.chip:hover{background:var(--bg-soft);}
.chip.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.minuteur-buttons{
  display:flex;
  justify-content:center;
  gap:0.8rem;
}

/* POINTS */
.points-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
}
.point-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.3rem;
}
.point-card .point-symbol{
  font-size:1.8rem;
  margin-bottom:0.5rem;
  color:var(--accent-dark);
}
.point-card h3{margin:0 0 0.3rem; font-size:1rem;}
.point-card .point-abbr{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:0.75rem;
  font-weight:600;
  padding:0.15rem 0.5rem;
  border-radius:6px;
  margin-bottom:0.5rem;
}
.point-card p{font-size:0.85rem; color:var(--ink-soft); margin:0;}

/* LAINE */
.laine-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.8rem;
  max-width:480px;
  margin:0 auto;
}
.laine-resultat{
  margin-top:1.2rem;
  padding:1rem;
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  text-align:center;
  font-size:1rem;
  color:var(--accent-dark);
  font-weight:600;
  display:none;
}
.laine-resultat.active{display:block;}

/* RESPONSIVE */
@media (max-width:640px){
  .topbar{flex-direction:column; align-items:flex-start;}
  .tabs{margin-left:0; width:100%; overflow-x:auto;}
  .compteur-value{font-size:3rem;}
  .minuteur-display{font-size:2.4rem;}
  .rang-nombre{font-size:1.8rem;}
}