/* /css/parcours-redesign.css — Parcours add-on
   Design: Serif | Tokens: theme.css | Mobile-first 360px
   Redesign 2026-08-22
   Ajouter APRES le style inline de parcours.html.
   Compacte les noeuds, labels visibles, barre sticky, resume matiere. */

/* 1. SUBJECT SUMMARY — au-dessus du serpentin */
.prc-summary{display:flex;align-items:center;justify-content:center;gap:var(--space-3,12px);padding:var(--space-4,16px);background:var(--ardoise-2);border:1px solid rgba(232,245,232,.08);border-radius:var(--radius-sm,8px);text-align:center;font-size:var(--text-sm,12.5px);color:rgba(232,245,232,.6)}
.prc-summary-matter{font-weight:500;color:var(--craie)}
.prc-summary-sep{color:rgba(232,245,232,.15)}
.prc-summary-count{color:var(--craie-doree);font-weight:500}
[dir="rtl"] .prc-summary-matter{font-family:var(--font-arabic)}

/* 2. SERPENTIN — noeuds compacts 36px, espacement 56px */
.prc-scroller{background:var(--ardoise-2);border:1px solid rgba(232,245,232,.08);border-radius:8px;padding:24px 16px;overflow-y:auto;max-height:65dvh;position:relative}
.prc-board{position:relative;max-width:440px;margin:0 auto;padding:20px 0 80px}
.prc-board svg{display:block;width:100%;height:auto;overflow:visible}
.prc-board .node{cursor:pointer}
.prc-board .node circle.face{fill:var(--ardoise);stroke:rgba(232,245,232,.45);stroke-width:2}
.prc-board .node text{font-family:'DM Sans',sans-serif;font-weight:500;fill:rgba(232,245,232,.55);font-size:14px;text-anchor:middle;dominant-baseline:central}
.prc-board .node.done circle.face{fill:var(--craie-doree);stroke:var(--craie-doree)}
.prc-board .node.done text{fill:var(--ardoise)}
.prc-board .node.current circle.face{fill:var(--ardoise);stroke:var(--craie);stroke-width:3}
.prc-board .node.current text{fill:var(--craie)}
.prc-board .node.milestone circle.face{stroke-dasharray:4 4}

/* Node labels — always visible */
.prc-board .nodeLabel{font-family:'DM Sans',sans-serif;font-size:11px;fill:rgba(232,245,232,.40);text-anchor:middle;font-weight:400}
[dir="rtl"] .prc-board .nodeLabel{font-family:'Cairo',sans-serif}
.prc-board .node.current .nodeLabel,.prc-board .node.done .nodeLabel{fill:var(--craie)}
.prc-board .node.locked .nodeLabel{fill:rgba(232,245,232,.25)}

/* Halo pulse on current node */
.prc-board .halo{fill:none;stroke:var(--craie);stroke-width:1.5;opacity:0}
.prc-board .node.current .halo{animation:prcBoardPulse 2.2s ease-out infinite}
@keyframes prcBoardPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.prc-board .node.current .halo{animation:none;opacity:.25}}

/* 3. STICKY PROGRESS BAR — bottom of serpentin area */
.prc-progress-sticky{position:sticky;bottom:0;left:0;right:0;display:flex;align-items:center;gap:var(--space-3,12px);padding:var(--space-4,16px) var(--space-5,20px);background:rgba(12,32,16,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(232,245,232,.08);z-index:10}
.prc-progress-info{flex:1;min-width:0}
.prc-progress-text{font-size:var(--text-sm,12.5px);font-weight:500;color:var(--craie)}
.prc-progress-bar{height:4px;background:rgba(232,245,232,.08);border-radius:2px;overflow:hidden;margin-top:6px}
.prc-progress-fill{height:100%;background:var(--craie-doree);border-radius:2px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.prc-progress-pct{font-size:var(--text-xs,11px);color:var(--craie-doree);font-weight:500;margin-inline-start:auto;flex-shrink:0}

/* Continue button — GOLD FILL of screen */
.prc-continue-btn{display:inline-flex;align-items:center;gap:8px;background:var(--craie-doree);color:var(--ardoise);font-family:var(--font-body);font-size:var(--text-sm,12.5px);font-weight:500;border:none;border-radius:var(--radius-sm,8px);padding:10px 16px;text-decoration:none;transition:filter .18s ease;min-height:44px;cursor:pointer;flex-shrink:0}
.prc-continue-btn:hover{filter:brightness(1.08)}
.prc-continue-btn:focus-visible{outline:2px solid var(--craie-doree);outline-offset:2px}
[dir="rtl"] .prc-continue-btn{font-family:var(--font-arabic)}

/* 4. CAROUSEL refresh */
.prc-carousel{display:flex;align-items:center;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0;scrollbar-width:none}
.prc-carousel::-webkit-scrollbar{display:none}
.prc-carousel .subjectSpacer{flex:0 0 auto;width:calc(50% - 40px)}
.prc-carousel .subjectCard{scroll-snap-align:center;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;background:var(--ardoise-2);border:1px solid rgba(232,245,232,.08);cursor:pointer;transition:all .18s ease}
.prc-carousel .subjectCard.active{background:rgba(217,168,87,.08);border-color:rgba(217,168,87,.25)}
.prc-carousel .subjectCard .icWrap{width:44px;height:44px;border-radius:50%;background:var(--ardoise-3);display:flex;align-items:center;justify-content:center;font-size:20px}
.prc-carousel .subjectCard.active .icWrap{background:rgba(217,168,87,.15);color:var(--craie-doree)}
.prc-carousel .subjectCard .lbl{font-size:12px;font-weight:400;color:rgba(232,245,232,.6);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.prc-carousel .subjectCard{transition:none}}

/* 5. HERO — kept, slight refresh */
.parcours-hero{position:relative;background:var(--ardoise) url('/assets/hero/hero-fond.webp') center/cover no-repeat;padding:48px 24px 36px;text-align:center;border-bottom:1px solid rgba(232,245,232,.08)}
.parcours-hero::after{content:'';position:absolute;inset:0;background:rgba(9,26,9,.55);pointer-events:none;z-index:0}
.parcours-hero>*{position:relative;z-index:1}
.parcours-title{font-family:var(--font-head);font-size:clamp(26px,4vw,36px);font-weight:400;color:var(--craie);letter-spacing:-.02em}
[dir="rtl"] .parcours-title{font-family:var(--font-arabic)}
.parcours-sub{font-size:14px;color:rgba(232,245,232,.7);margin-top:8px}
@media(max-width:767px){.parcours-hero{background-image:url('/assets/hero/hero-fond-m.webp')}}

@media(min-width:1024px){.parcours-container{max-width:1020px;display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}.parcours-hero{border-radius:var(--radius-md,14px);margin:16px 24px 0;padding:40px 24px}}