/* ================================================================
   parcours.css - Page Roadmap PracticIT
   ================================================================ */

:root {
  --serif: 'Instrument Serif', Georgia, serif;
}

html {
  scroll-behavior: smooth;
}

.roadmap-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(30,100,152,.28), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(16,185,129,.10), transparent 28%),
    linear-gradient(135deg, #0B1018 0%, #121A24 58%, #0D1117 100%);
  padding: 54px 80px 50px;
  text-align: center;
}

.roadmap-kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: #93c5fd;
  margin-bottom: 14px;
}

.roadmap-hero h1 {
  max-width: 760px;
  margin: 0 auto 14px;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: #f1f5f9;
}

.roadmap-hero p {
  max-width: 610px;
  margin: 0 auto;
  color: #dbe5f1;
  font-size: 15px;
  line-height: 1.65;
}

.roadmap-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.roadmap-primary,
.roadmap-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s, transform .15s, border-color .15s, background .15s;
}

/* Cercle de progression hero */
.hero-ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; margin:28px auto 0; }
.hero-ring-svg { transform:rotate(-90deg); display:block; }
.hero-ring-bg   { fill:none; stroke:rgba(255,255,255,.10); stroke-width:9; }
.hero-ring-fill { fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; stroke-dasharray:364.42; stroke-dashoffset:364.42; transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.hero-ring-inner { position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; }
.hero-ring-pct   { font-family:var(--mono); font-size:28px; font-weight:700; color:#f1f5f9; line-height:1; }
.hero-ring-sub   { font-family:var(--mono); font-size:10px; color:#93c5fd; letter-spacing:.05em; }
.hero-ring-count { font-family:var(--mono); font-size:11px; color:rgba(219,229,241,.55); }

/* Badge En cours */
.roadmap-item-check.inprogress { background:#fffbeb; border-color:var(--orange); color:var(--orange); }
.roadmap-item-tags { display:flex; gap:5px; flex-wrap:nowrap; margin-left:auto; flex-shrink:0; }
.roadmap-tag { font-family:var(--mono); font-size:9px; padding:2px 6px; border-radius:4px; background:var(--bg3); color:var(--text3); border:1px solid var(--border); white-space:nowrap; }
.roadmap-item-badge { display:none; font-family:var(--mono); font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; background:#fffbeb; color:var(--orange); border:1px solid rgba(245,158,11,.30); line-height:1.5; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.roadmap-item-badge:not(:empty) { display:inline-block; }

.roadmap-primary {
  background: var(--accent);
  color: #fff;
}

.roadmap-primary:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.roadmap-section {
  background: var(--bg);
  padding: 32px 40px;
  flex: 1;
}

.roadmap-heading {
  max-width: 760px;
  margin: 0 auto 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,22,18,.08);
  text-align: center;
}

.roadmap-heading h2 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: 0;
}

.roadmap-heading p {
  max-width: 540px;
  margin: 0 auto;
  color: #5f564d;
  font-size: 13px;
  line-height: 1.55;
}

.global-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  max-width: 860px;
  margin: 0 auto 18px;
}

.global-stat {
  background: rgba(251,249,246,.68);
  border: 1px solid rgba(26,22,18,.08);
  border-radius: 6px;
  padding: 15px;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease, border-color .15s, background .15s, box-shadow .2s;
}

.global-stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.global-stat.visible:hover {
  border-color: rgba(30,100,152,.22);
  background: rgba(251,249,246,.88);
  box-shadow: 0 12px 28px rgba(26,22,18,.07);
}

.global-stat-num {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.global-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.35;
}

.global-stat-bar,
.roadmap-col-progress-bar {
  height: 4px;
  background: rgba(236,231,220,.95);
  border-radius: 999px;
  overflow: hidden;
}

.global-stat-bar {
  margin-top: 10px;
}

.global-stat-fill,
.roadmap-col-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s;
}

/* Onglets */
.roadmap-tabs-wrap { max-width: 860px; margin: 0 auto; background: var(--bg2); border: 1px solid rgba(26,22,18,.10); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(26,22,18,.055); }
.roadmap-tab-bar { display: flex; border-bottom: 1px solid rgba(26,22,18,.10); }
.roadmap-tab { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: none; border: none; border-top: 3px solid transparent; cursor: pointer; text-align: left; transition: background .15s, border-color .2s; }
.roadmap-tab:hover { background: rgba(244,239,230,.50); }
.roadmap-tab.active { border-top-color: var(--accent); background: rgba(30,100,152,.04); }
.roadmap-tab[data-tab="windows"].active { border-top-color: var(--accent); background: rgba(30,100,152,.04); }
.tab-title { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.2; }
.tab-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }
.tab-count { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-top: 4px; }
.roadmap-panel { display: none; }
.roadmap-panel.active { display: block; }

/* Anneaux onglets */
.col-ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.col-ring-svg  { transform:rotate(-90deg); display:block; }
.col-ring-bg   { fill:none; stroke:rgba(26,22,18,.10); stroke-width:7; }
.col-ring-fill { fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:150.80; stroke-dashoffset:150.80; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.col-ring-blue   { stroke:var(--accent); }
.col-ring-purple { stroke:var(--accent); }
.col-ring-green  { stroke:var(--green); }
.col-ring-inner { position:absolute; display:flex; align-items:center; justify-content:center; }
.col-ring-pct   { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text); }

.roadmap-col-progress {
  margin-top: 14px;
}

.roadmap-col-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

.roadmap-level {
  padding: 0 14px;
}

.roadmap-level-title,
.roadmap-synthese-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 6px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #6B6258;
  line-height: 1.35;
}

.roadmap-level-dot,
.roadmap-synthese-divider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.roadmap-synthese-divider {
  color: #6B48D8;
}

.roadmap-synthese-divider-dot {
  background: #a855f7;
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 5px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}

.roadmap-item:hover {
  background: rgba(244,239,230,.58);
  border-color: rgba(30,100,152,.18);
  transform: translateY(-1px);
}

.roadmap-item-check {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid rgba(26,22,18,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--mono);
  transition: all .2s;
}

.roadmap-item-check.done {
  background: #ecfdf5;
  border-color: var(--green);
  color: var(--green);
}

.roadmap-item-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text3);
  line-height: 1.35;
}

.roadmap-item-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
}

.roadmap-item-name.done {
  color: var(--text);
  font-weight: 700;
}

.roadmap-divider {
  height: 1px;
  background: rgba(26,22,18,.10);
  margin: 10px 14px 0;
}

.roadmap-tools {
  padding: 14px;
  background: rgba(244,239,230,.42);
}

.roadmap-tools-title {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #6B6258;
}

.global-stat:nth-child(1),
.roadmap-col:nth-child(1) { transition-delay: 0s; }
.global-stat:nth-child(2),
.roadmap-col:nth-child(2) { transition-delay: .1s; }
.global-stat:nth-child(3) { transition-delay: .2s; }

.roadmap-tool-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.roadmap-tool-item:hover {
  background: var(--bg2);
  color: var(--text);
}

.reset-btn {
  display: block;
  margin: 22px auto 0;
  padding: 8px 13px;
  border: 1px solid rgba(26,22,18,.12);
  border-radius: 6px;
  background: rgba(251,249,246,.70);
  color: var(--text3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  transition: border-color .2s, color .2s, background .2s;
}

.reset-btn:hover {
  border-color: rgba(239,68,68,.35);
  color: var(--red);
  background: var(--bg2);
}

@media(max-width:860px) {
  .roadmap-hero {
    padding: 42px 24px;
  }
  .roadmap-tabs-wrap { max-width: 100%; }
  .roadmap-tab { padding: 14px 16px; gap: 10px; }
}

@media(max-width:700px) {
  .roadmap-hero {
    padding: 36px 16px;
  }
  .roadmap-section {
    padding: 34px 16px;
  }
  .roadmap-hero-actions {
    flex-direction: column;
    align-items: center;
  }
  .roadmap-primary {
    width: min(100%, 260px);
  }
  .global-stat {
    padding: 14px;
  }
  .roadmap-col-header {
    padding: 18px 18px 15px;
  }
}