/* Parcours Claude : styles de la page parcours-claude.html. Tout est limite a .pc pour ne pas toucher au reste du site. Theme sombre GSSIEP. */
.pc{
  --font-display:'Roboto',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#020617; --surface:#0f172a; --surface-2:#1e293b; --ink:#e5e7eb; --muted:#9ca3af; --line:#2a3a52;
  --accent:#3b82f6; --accent-ink:#020617; --accent-soft:#172554;
  --ok:#22c55e; --ok-soft:#052e16; --warn:#facc15; --warn-soft:#3a2f08; --bad:#f87171; --bad-soft:#450a0a;
  --pc-top:0px;
  color:var(--ink);font:16px/1.6 var(--font-body);
}
.pc,.pc *{box-sizing:border-box}
.pc{color-scheme:dark}
.pc .wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pc a{color:#93c5fd}
.pc a:hover{color:#bfdbfe}
.pc h1,.pc h2,.pc h3{text-wrap:balance}
.pc h1{font-weight:900;font-size:clamp(32px,6vw,62px);line-height:1.02;letter-spacing:-.01em}
.pc h2{font-weight:900;font-size:clamp(26px,4vw,40px);line-height:1.08;letter-spacing:-.005em}
.pc .fiche-num{font-weight:900;font-size:44px}
.pc .fiche-title h3{font-weight:800;font-size:22px;line-height:1.15}
.pc .pccard h3{font-weight:800;font-size:20px;line-height:1.15}
.pc .v{font-weight:900;font-size:40px}
.pc .pctop{position:static;background:#0b1120}
@media(max-width:900px){.pc .pctop{position:sticky;top:var(--pc-top);z-index:20}}
html{scroll-padding-top:210px}
@media(max-width:900px){html{scroll-padding-top:150px}}
.pc .pcbtn.solid{color:var(--accent-ink)}
.pc .pcbtn{box-shadow:none;border-radius:6px}
.pc .pcbtn:hover{transform:none}
.pc pre{max-width:100%}
.pc .pcnav{display:flex}
.pc .out{top:calc(var(--pc-top) + 70px)}
.pc-foot{padding-block:32px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.pc .wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pc a{color:var(--accent)}
.pc :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pc h1,.pc h2,.pc h3{text-wrap:balance}
.pc p{margin:0 0 12px}
.pc .pctop{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.pc .pctop .wrap{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:10px}
.pc .brand{font:600 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pc .brand b{color:var(--accent)}
.pc .pcnav{display:flex;gap:2px;overflow-x:auto;flex:1 1 320px;min-width:0;scrollbar-width:none}
.pc .pcnav::-webkit-scrollbar{display:none}
.pc .pcnav a{font:500 12px var(--font-mono);letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:4px;white-space:nowrap}
.pc .pcnav a:hover{color:var(--ink);background:var(--surface-2)}
.pc .mini{display:flex;align-items:center;gap:10px;font:600 12px var(--font-mono);color:var(--muted);white-space:nowrap}
.pc .bar{width:110px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.pc .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.pc .pchero{padding-block:clamp(32px,6vw,72px) 36px}
.pc .pchero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px 56px;align-items:end}
@media(max-width:860px){.pc .pchero .wrap{grid-template-columns:minmax(0,1fr)}}
.pc .eyebrow{font:600 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.pc h1{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,9vw,108px);line-height:.9;text-transform:uppercase;margin:0 0 22px}
.pc h1 em{font-style:normal;color:var(--accent)}
.pc .lede{font-size:18px;max-width:54ch;color:var(--muted);margin:0}
.pc .dash{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:18px}
.pc .dash .row{display:grid;gap:2px}
.pc .k{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pc .v{font-family:var(--font-display);font-weight:800;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.pc .v small{font-size:20px;font-weight:700;color:var(--muted);margin-left:4px}
.pc .tag{font:600 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--warn-soft);color:var(--warn);margin-left:8px;vertical-align:middle}
.pc .tag[hidden]{display:none}
.pc .dash .bar{width:100%;height:8px}
.pc .pcbtn{font:600 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:4px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.pc .pcbtn:hover{background:var(--accent-soft)}
.pc .pcbtn.solid{background:var(--accent);color:var(--accent-ink)}
.pc .pcbtn.ghost{border-color:var(--line);color:var(--muted)}
.pc .pcbtn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.pc section.s{padding-block:52px;border-top:1px solid var(--line)}
.pc h2{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5vw,52px);line-height:.98;text-transform:uppercase;margin:0 0 14px}
.pc .intro{max-width:64ch;color:var(--muted);font-size:17px;margin-bottom:28px}
.pc .scroll-x{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.pc table{width:100%;border-collapse:collapse}
.pc th{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pc td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.pc tr:last-child td{border-bottom:0}
.pc .audit{min-width:760px}
.pc .audit td:first-child{font-weight:600;width:24%}
.pc .audit td:nth-child(2){color:var(--muted);width:36%}
.pc .audit td:nth-child(3){width:40%}
.pc .audit .fix{font:600 11px var(--font-mono);letter-spacing:.08em;color:var(--ok);margin-right:6px}
.pc .fiche{background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-bottom:20px}
.pc .fiche-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px dashed var(--line)}
.pc .fiche-num{font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1;color:var(--accent);min-width:80px}
.pc .fiche-title h3{margin:0;font-family:var(--font-display);font-size:30px;font-weight:700;text-transform:uppercase;line-height:1.05}
.pc .meta{margin:2px 0 0;font:500 12px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pc .status{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.pc .status.doing{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.pc .status.done{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.pc .fiche-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding:20px}
@media(max-width:860px){.pc .fiche-body{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.pc .fiche-head{grid-template-columns:auto minmax(0,1fr)}.pc .status{grid-column:1/-1;justify-self:start}.pc .fiche-num{font-size:44px;min-width:64px}}
.pc .goal{font-weight:600;margin-bottom:12px}
.pc .steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pc .steps label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:8px 10px;border-radius:4px;cursor:pointer}
.pc .steps label:hover{background:var(--surface-2)}
.pc input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--muted);border-radius:3px;background:var(--surface);display:grid;place-content:center;cursor:pointer}
.pc input[type=checkbox]::after{content:"";width:10px;height:10px;background:var(--accent-ink);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .12s}
.pc input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.pc input[type=checkbox]:checked::after{transform:scale(1)}
.pc .steps input:checked+span{color:var(--muted)}
.pc .check{background:var(--surface-2);border-radius:4px;padding:16px;align-self:start;display:grid;gap:6px}
.pc .lbl{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pc .check p{margin:0 0 8px;font-size:15px}
.pc .codewrap{position:relative}
.pc pre{margin:0;font:400 12.5px/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px}
.pc .codewrap pre{padding-top:42px}
.pc .copy{position:absolute;top:8px;right:8px;padding:5px 10px}
.pc .resetline{display:flex;justify-content:flex-end;margin-top:4px}
.pc .gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:920px){.pc .gen{grid-template-columns:minmax(0,1fr)}}
.pc .panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.pc .field{display:grid;gap:4px;margin-bottom:14px}
.pc .field label,.pc .rate label{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pc .field .hint{font-size:13px;color:var(--muted);margin:0}
.pc textarea,.pc select,.pc input[type=text],.pc input[type=number]{width:100%;font:15px/1.5 var(--font-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px}
.pc textarea{min-height:68px;resize:vertical}
.pc textarea:focus,.pc select:focus,.pc input[type=text]:focus,.pc input[type=number]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
.pc .out{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
@media(max-width:920px){.pc .out{position:static}}
.pc .out pre{max-height:60vh;overflow:auto;padding-top:44px}
.pc .state{font:500 13px var(--font-mono);margin:0 0 12px;padding:8px 10px;border-radius:4px;background:var(--warn-soft);color:var(--warn)}
.pc .state.ok{background:var(--ok-soft);color:var(--ok)}
.pc .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.pc .pccard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:10px;align-content:start;min-width:0}
.pc .pccard h3{margin:0;font-family:var(--font-display);font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.05}
.pc .apps{font:500 12px var(--font-mono);color:var(--muted);margin:0}
.pc .chips{display:flex;flex-wrap:wrap;gap:6px}
.pc .chip{font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:3px}
.pc .chip.read{background:var(--ok-soft);color:var(--ok)}
.pc .chip.draft{background:var(--accent-soft);color:var(--accent)}
.pc .chip.act{background:var(--warn-soft);color:var(--warn)}
.pc .guard{font-size:14px;color:var(--muted);margin:0}
.pc .guard b{color:var(--ink)}
.pc .rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 32px;margin:0;padding:0;list-style:none}
.pc .rules li{padding:16px 0;border-top:1px solid var(--line)}
.pc .rules strong{display:block;font-size:17px;margin-bottom:2px}
.pc .rules span{color:var(--muted);font-size:15px}
.pc .note{background:var(--surface-2);border-radius:4px;padding:12px 14px;font-size:14px;color:var(--muted);margin-top:20px}
.pc .calc{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:960px){.pc .calc{grid-template-columns:minmax(0,1fr)}}
.pc .gains{min-width:640px}
.pc .gains td{padding:6px 8px;vertical-align:middle}
.pc .gains input{padding:7px 8px;font-variant-numeric:tabular-nums}
.pc .gains td.g{font:600 13px var(--font-mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pc .gains td.g.neg{color:var(--bad)}
.pc .sample{font-size:14px;padding:10px 12px;border-radius:4px;background:var(--warn-soft);color:var(--warn);margin-bottom:12px}
.pc .sample[hidden]{display:none}
.pc .tools{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:12px}
.pc .rate{display:grid;gap:4px;width:150px}
.pc .cmp{display:grid;gap:10px;margin-top:6px}
.pc .cmp .line{display:grid;gap:4px;font-size:14px}
.pc .cmp .track{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.pc .cmp .track i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.pc .cmp .track i.ref{background:var(--muted);opacity:.55}
.pc .res{display:grid;gap:16px}
.pc .opt{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;cursor:pointer;margin-bottom:6px}
.pc .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media(max-width:520px){.pc .row2{grid-template-columns:minmax(0,1fr)}}

/* Demarrage : reglages de depart pour debutants */
.pc .startgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:8px}
.pc .start{gap:8px}
.pc .startrow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.pc .starttitle{font-weight:700;font-size:17px;line-height:1.3}
.pc .startp{margin:0;font-size:15px;color:var(--ink)}
.pc .startp .lbl{display:block;margin-bottom:2px}
.pc .start:has(input:checked){border-color:var(--ok)}
.pc .start:has(input:checked) .starttitle{color:var(--muted)}
.pc .startcount{margin:0 0 16px}

/* Aides : exemples de profil, aide par fiche, etape suivante apres copie */
.pc .presets{margin:0 0 20px}
.pc .presets .lbl{margin:0 0 8px}
.pc .presetbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pc .presets .hint{margin:0;font-size:14px;color:var(--muted)}
.pc .presets .hint.ok{color:var(--ok)}
.pc .help{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}
.pc .help summary{cursor:pointer;color:var(--accent);font:600 13px var(--font-mono);letter-spacing:.04em}
.pc .help summary:hover{text-decoration:underline}
.pc .help ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.pc .help li{font-size:15px;color:var(--ink)}
.pc .nextstep{margin:10px 0 0;font-size:14px;color:var(--ok)}
.pc .nextstep.warn{color:var(--warn)}