/* ===== PAGE RÉSULTATS – styles spécifiques ===== */

/* HERO */
.res-hero {
  padding: 9rem 2rem 5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.res-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(16,185,129,.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(99,102,241,.1) 0%, transparent 60%);
}
.res-hero-content { position: relative; z-index: 2; }

/* NAV ACTIVE */
.nav-active { color: var(--green) !important; font-weight: 600 !important; }

/* ===== WEIGHT SELECTOR ===== */
.weight-selector {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 2rem;
}
.weight-selector label {
  font-size: .9rem; color: var(--text-muted); font-weight: 500;
}
.weight-input-wrap {
  display: flex; align-items: center; gap: .75rem;
}
#weightDisplay {
  font-size: 2rem; font-weight: 800;
  min-width: 60px; text-align: center;
  color: var(--text);
}
.w-unit { font-size: 1rem; color: var(--text-dim); }
.w-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(99,102,241,.12);
  color: var(--primary-light); font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.w-btn:hover { background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.4); }
.btn-recalc {
  padding: .55rem 1.4rem;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; border: none; border-radius: 8px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.btn-recalc:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.35); }

/* ===== CHART ===== */
.chart-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2rem 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.chart-weeks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; margin-top: 1rem;
  padding: 0 .5rem;
}
.week-tag {
  font-size: .72rem; font-weight: 600;
  text-align: center; padding: .4rem .5rem;
  border-radius: 8px;
  text-transform: uppercase; letter-spacing: .3px;
}
.week-1 {
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.25);
  color: var(--primary-light);
}
.week-1 em { font-style: normal; color: #94a3b8; display: block; font-weight: 400; font-size: .68rem; letter-spacing: 0; }
.week-2, .week-3, .week-4 {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  color: var(--green-light);
}

/* CHART LEGEND CARDS */
.chart-legend-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.legend-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid;
}
.legend-water {
  background: rgba(99,102,241,.06);
  border-color: rgba(99,102,241,.2);
}
.legend-fat {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.2);
}
.legend-icon { font-size: 1.75rem; flex-shrink: 0; }
.legend-body h4 { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.legend-body p { font-size: .85rem; color: var(--text-muted); line-height: 1.65; }
.legend-loss {
  font-size: .78rem; font-weight: 700;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  color: #fbbf24;
  padding: .15rem .6rem; border-radius: 50px;
  margin-left: .5rem;
}

/* ===== PILIERS ===== */
.piliers-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.pilier-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}
.pilier-water { border-color: rgba(99,102,241,.25); }
.pilier-protein { border-color: rgba(16,185,129,.25); }
.pilier-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.pilier-emoji { font-size: 2rem; }
.pilier-header h3 { font-size: 1.1rem; font-weight: 700; flex: 1; }
.pilier-badge {
  font-size: .72rem; font-weight: 800;
  padding: .25rem .75rem; border-radius: 50px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171;
  text-transform: uppercase; letter-spacing: .5px;
}
.pilier-badge-green {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.3);
  color: var(--green-light);
}
.pilier-intro {
  font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem;
  line-height: 1.7;
}
.pilier-targets {
  display: flex; gap: 1rem; margin-bottom: 1.25rem;
}
.pt-item {
  flex: 1; text-align: center;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 10px;
  padding: .75rem;
}
.pilier-protein .pt-item {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.15);
}
.pt-val {
  display: block; font-size: 1.5rem; font-weight: 800;
  color: var(--primary-light);
}
.pilier-protein .pt-val { color: var(--green-light); }
.pt-label { font-size: .72rem; color: var(--text-dim); }
.pilier-tips {
  list-style: none; display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: 1.5rem;
}
.pilier-tips li { font-size: .88rem; color: var(--text-muted); }

/* Hydro bar chart */
.hydro-bar-wrap > span {
  font-size: .78rem; color: var(--text-dim); display: block; margin-bottom: .75rem;
}
.hydro-timeline {
  display: flex; align-items: flex-end; gap: .5rem; height: 70px;
}
.ht-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: .2rem;
  font-size: .68rem; color: var(--text-dim);
}
.ht-bar {
  width: 100%;
  background: linear-gradient(180deg, rgba(99,102,241,.6), rgba(99,102,241,.25));
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(99,102,241,.3);
}

/* Protein meter interactive */
.protein-meter {
  background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.15);
  border-radius: 12px; padding: 1.25rem;
}
.pm-label {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--text-muted);
  margin-bottom: .5rem;
}
.pm-track {
  height: 10px; background: rgba(255,255,255,.07);
  border-radius: 5px; overflow: hidden; margin-bottom: .75rem;
}
.pm-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  border-radius: 5px;
  transition: width .4s ease;
}
.pm-sources {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem;
}
.pm-src {
  padding: .35rem .75rem;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 8px;
  font-size: .8rem; cursor: pointer;
  transition: all .2s; color: var(--text-muted);
  user-select: none;
}
.pm-src:hover { background: rgba(16,185,129,.2); color: var(--text); }
.pm-src-reset {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color: #f87171;
}
.pm-src-reset:hover { background: rgba(239,68,68,.18); }
.pm-current { font-size: .8rem; color: var(--text-dim); text-align: center; }
.pm-current span { color: var(--green-light); font-weight: 700; }

/* ===== SEMAINES GRID ===== */
.weeks-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.week-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform .3s, border-color .3s;
}
.week-card:hover { transform: translateY(-5px); border-color: rgba(99,102,241,.3); }
.week-card-highlight {
  border-color: rgba(16,185,129,.35);
  box-shadow: 0 0 40px rgba(16,185,129,.08);
}
.wc-header { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.wc-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: var(--primary-light);
  flex-shrink: 0;
}
.week-card-highlight .wc-num {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.3);
  color: var(--green-light);
}
.wc-header h3 { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.wc-loss {
  display: inline-block;
  font-size: .75rem; font-weight: 700;
  padding: .15rem .6rem; border-radius: 50px;
}
.wc-loss-water {
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  color: var(--primary-light);
}
.wc-loss-fat {
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.3);
  color: var(--green-light);
}
.wc-type { font-size: .78rem; font-weight: 600; color: var(--text-dim); margin-bottom: .75rem; }
.week-card p { font-size: .85rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; }
.wc-tips {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.wc-tips span {
  font-size: .72rem; padding: .2rem .55rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 50px; color: var(--text-dim);
}

/* ===== DISCLAIMER ===== */
.disclaimer-section { padding: 3rem 2rem; }
.disclaimer-box {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 800px; margin: 0 auto;
}
.disclaimer-icon { font-size: 2.5rem; flex-shrink: 0; }
.disclaimer-box h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: #fbbf24; }
.disclaimer-box p { font-size: .88rem; color: var(--text-muted); line-height: 1.7; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .weeks-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Hero */
  .res-hero { padding: 7rem 1.25rem 3rem; }

  /* Chart */
  .chart-wrap { padding: 1.25rem 1rem .75rem; }
  .chart-weeks {
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
  }
  .week-tag { font-size: .68rem; padding: .3rem .4rem; }

  /* Legend */
  .chart-legend-cards { grid-template-columns: 1fr; }
  .legend-card { flex-direction: column; padding: 1.25rem; }

  /* Weight selector */
  .weight-selector {
    flex-direction: column;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
  }
  #weightDisplay { font-size: 1.6rem; }

  /* Piliers */
  .piliers-grid { grid-template-columns: 1fr; }
  .pilier-card { padding: 1.5rem; }
  .pilier-header h3 { font-size: 1rem; }
  .pilier-targets { flex-direction: row; }

  /* Hydro bar */
  .hydro-timeline { gap: .3rem; }
  .ht-item span:first-child { font-size: .6rem; }
  .ht-item span:last-child { font-size: .6rem; }

  /* Protein meter sources */
  .pm-sources { justify-content: center; }
  .pm-src { font-size: .75rem; padding: .3rem .6rem; }

  /* Semaines */
  .weeks-grid { grid-template-columns: 1fr; }
  .week-card { padding: 1.4rem; }

  /* Disclaimer */
  .disclaimer-box {
    flex-direction: column;
    padding: 1.5rem;
  }
}

@media (max-width: 420px) {
  .chart-weeks { grid-template-columns: repeat(4, 1fr); }
  .week-tag { font-size: .58rem; padding: .25rem .2rem; }
  .pilier-targets { flex-direction: column; }
  .pm-sources { gap: .4rem; }
}