/* ============================================================
           REFONTE — l'atelier Versa PC : un carnet de suivi, pas un
           tableau de bord générique. Signature : le "docket" de build,
           traité comme un vrai bon d'atelier (bord perforé, référence,
           étapes façon arrêts de parcours).
        ============================================================ */

/* ===== HERO ===== */

.client-hero {
            padding: calc(52px + 60px) 0 2.5rem;
            background: var(--color-bg);
            border-bottom: 1px solid var(--color-border);
        }

.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }

.hero-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.5rem; }

.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.hero-greeting { font-family: var(--font-display); font-size: clamp(1.625rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; max-width: 26ch; }

.hero-id {
            display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: 0.875rem 1.25rem 0.875rem 0.875rem;
        }

.hero-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--color-accent); color: #151819; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px -3px rgba(242,140,40,0.5); }

.hero-id-text { text-align: left; }

.hero-id-name { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.3; }

.hero-id-mail { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }

.hero-id-row { display: flex; align-items: center; gap: 0.625rem; }

.hero-founder {
            display: inline-flex; align-items: center; gap: 0.4rem;
            background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.35);
            color: #a78bfa; font-size: 0.625rem; font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase;
            padding: 0.2rem 0.55rem; border-radius: 999px; width: fit-content;
        }

.hero-logout {
            display: inline-flex; align-items: center; gap: 0.4rem;
            background: none; border: none; color: var(--color-text-dim);
            font-size: 0.75rem; font-family: inherit; cursor: pointer;
            padding: 0.3rem 0; transition: color 0.2s;
        }

.hero-id-divider { width: 1px; height: 12px; background: var(--color-border-strong); }

.hero-logout:hover { color: #f87171; }

/* ===== DOCKET (signature) ===== */

.docket {
            position: relative;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 20px;
            padding: 1.875rem 2.125rem 1.625rem;
            overflow: hidden;
        }

.docket::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background-image: repeating-linear-gradient(90deg, var(--color-border-strong) 0 10px, transparent 10px 20px);
        }

.docket-notch { position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg); }

.docket-notch.left { left: -11px; }

.docket-notch.right { right: -11px; }

.docket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.375rem; }

.docket-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.375rem; }

.docket-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }

.docket-ref { font-size: 0.75rem; color: var(--color-text-dim); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.docket-cta { text-align: right; flex-shrink: 0; }

/* ===== COQUILLE : nav pilule horizontale + contenu ===== */

.client-shell { display: block; }

.client-nav-bar {
            position: sticky; top: 62px; z-index: 20;
            display: flex; gap: 0.375rem; overflow-x: auto;
            padding: 0.75rem 0; margin-bottom: var(--space-md);
            background: var(--color-bg); border-bottom: 1px solid var(--color-border);
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }

.client-nav-bar::-webkit-scrollbar { display: none; }

.client-tab {
            position: relative; background: none; border: 1px solid transparent;
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.5625rem 1rem;
            border-radius: 999px; flex-shrink: 0;
            font-size: 0.8125rem; font-weight: 500;
            color: var(--color-text-muted);
            cursor: pointer; font-family: inherit; white-space: nowrap;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }

.client-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; flex-shrink: 0; }

.client-tab:hover { color: var(--color-text); border-color: var(--color-border-strong); }

.client-tab.active { color: #151819; background: var(--color-accent); font-weight: 600; box-shadow: 0 3px 12px -3px rgba(242,140,40,0.5); }

.tab-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: rgba(242,140,40,0.12); border: 1px solid rgba(242,140,40,0.3); color: var(--color-accent-text); font-size: 0.65625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.client-tab.active .tab-badge { background: rgba(17,17,17,0.18); border-color: transparent; color: #151819; }

.client-content { max-width: 900px; }

/* ===== PANELS ===== */

.client-main { padding: var(--space-lg) 0 var(--space-2xl); }

.cpanel { display: none; animation: cIn 0.35s cubic-bezier(0.22,1,0.36,1); }

.cpanel.active { display: block; }

@keyframes cIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.c-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); }

.c-card + .c-card { margin-top: var(--space-sm); }

.c-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.25rem; }

.c-sub { font-size: 0.8125rem; color: var(--color-text-muted); }

.c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-sm); }

/* Stats aperçu */

.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin: 1.75rem 0 var(--space-md); }

.c-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.125rem 1.25rem; transition: border-color 0.2s; }

.c-stat:hover { border-color: var(--color-border-strong); }

.c-stat span { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.5rem; }

.c-stat strong { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.c-stat small { display: block; font-size: 0.75rem; color: var(--color-text-dim); margin-top: 0.2rem; }

/* Actions rapides */

.c-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }

.c-quick a { display: flex; align-items: center; gap: 0.875rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; text-decoration: none; color: var(--color-text); transition: border-color 0.2s, transform 0.25s; }

.c-quick a:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }

.c-quick-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; background: rgba(242,140,40,0.09); border: 1px solid rgba(242,140,40,0.2); color: var(--color-accent-text); display: flex; align-items: center; justify-content: center; }

.c-quick strong { display: block; font-size: 0.875rem; font-weight: 600; }

.c-quick span { font-size: 0.75rem; color: var(--color-text-muted); }

/* ===== COMMANDES ===== */

.order-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-sm); }

.order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-sm); }

.order-ref { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 0.25rem; }

.order-name { font-size: 1.0625rem; font-weight: 600; }

.order-date { font-size: 0.8125rem; color: var(--color-text-dim); margin-top: 0.125rem; }

.order-total { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; text-align: right; }

.order-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-top: 0.375rem; }

.order-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.order-status.confirm { background: rgba(226,173,93,0.1); color: #e2ad5d; border: 1px solid rgba(226,173,93,0.25); }

.order-status.build { background: rgba(111,169,232,0.1); color: #6fa9e8; border: 1px solid rgba(111,169,232,0.25); }

.order-status.ready { background: rgba(85,200,153,0.1); color: #55c899; border: 1px solid rgba(85,200,153,0.25); }

.order-status.shipped { background: rgba(255,255,255,0.05); color: var(--color-text-muted); border: 1px solid var(--color-border-strong); }

.order-status.done { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }

.order-track { display: flex; align-items: flex-start; padding: 0.875rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-sm); }

.ot-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }

.ot-step:not(:last-child)::after { content: ''; position: absolute; top: 7px; left: 50%; width: 100%; height: 1px; background: var(--color-border); }

.ot-step.done:not(:last-child)::after { background: var(--color-accent); }

.ot-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface); position: relative; z-index: 1; margin-bottom: 6px; }

.ot-step.done .ot-dot { background: var(--color-accent); border-color: var(--color-accent-text); }

.ot-step.current .ot-dot { border-color: var(--color-accent-text); box-shadow: 0 0 0 3px rgba(242,140,40,0.18); }

.ot-step span { font-size: 0.625rem; font-weight: 500; color: var(--color-text-dim); text-align: center; }

.ot-step.done span, .ot-step.current span { color: var(--color-text-muted); }

.order-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.order-btn { background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: border-color 0.2s, color 0.2s; text-decoration: none; display: inline-block; }

.order-btn:hover { border-color: var(--color-accent-text); color: var(--color-accent-text); }

/* ===== CONFIGURATIONS ===== */

.config-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-sm); }

.config-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin: var(--space-sm) 0; }

.config-specs div { font-size: 0.8125rem; color: var(--color-text-muted); }

.config-specs b { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.125rem; }

/* ===== GARANTIE ===== */

.w-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-sm); }

.w-bar { height: 7px; background: var(--color-bg-alt); border-radius: 999px; overflow: hidden; margin: 0.75rem 0 0.5rem; }

.w-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f9e73, #55c899); border-radius: 999px; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }

.w-bar.warn i { background: linear-gradient(90deg, #c98a2e, #e2ad5d); }

.w-bar.end i { background: linear-gradient(90deg, var(--color-accent), #ff6a5f); }

.w-line { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); }

.w-line b { color: var(--color-text); }

/* ===== MON PC / CENTRE DE TÉLÉCHARGEMENT ===== */

.pc-select-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-md); }

.pc-select-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; }

.pc-select-chip.active { border-color: var(--color-accent-text); color: var(--color-accent-text); background: rgba(242,140,40,0.06); }

.pc-status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }

.pc-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pc-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin-top: var(--space-sm); }

.pc-comp-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.875rem 1rem; }

.pc-comp-type { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-dim); margin-bottom: 0.25rem; }

.pc-comp-name { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

.pc-comp-serial { font-size: 0.6875rem; color: #55c899; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-top: var(--space-sm); }

.dl-item { display: flex; align-items: center; gap: 0.75rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.875rem 1rem; text-decoration: none; color: var(--color-text); transition: border-color 0.2s; }

.dl-item:hover { border-color: var(--color-accent-text); }

.dl-item.disabled { opacity: 0.4; pointer-events: none; }

.dl-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(242,140,40,0.09); border: 1px solid rgba(242,140,40,0.2); color: var(--color-accent-text); display: flex; align-items: center; justify-content: center; }

.dl-item strong { display: block; font-size: 0.8125rem; font-weight: 600; }

.dl-item small { font-size: 0.6875rem; color: var(--color-text-muted); }

/* Formulaire SAV / Profil */

.profile-form { display: grid; gap: var(--space-sm); }

.profile-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

.profile-form label { display: grid; gap: 0.45rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

.profile-form input, .profile-form select, .profile-form textarea {
            background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
            padding: 0.8125rem 1rem; font-size: 0.9375rem; color: var(--color-text); font-family: inherit;
            outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
            letter-spacing: 0; text-transform: none; font-weight: 400;
        }

.profile-form input:focus, .profile-form select:focus, .profile-form textarea:focus { border-color: var(--color-accent-text); box-shadow: 0 0 0 3px rgba(242,140,40,0.08); }

.profile-form textarea { min-height: 110px; resize: vertical; }

.pref-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--color-border); }

.pref-toggle:last-of-type { border-bottom: none; }

.pref-toggle strong { display: block; font-size: 0.875rem; font-weight: 600; }

.pref-toggle small { font-size: 0.75rem; color: var(--color-text-muted); }

.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); position: relative; cursor: pointer; transition: background 0.25s, border-color 0.25s; flex-shrink: 0; }

.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-text-muted); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.25s; }

.switch:checked { background: var(--color-accent); border-color: var(--color-accent-text); }

.switch:checked::after { transform: translateX(18px); background: #111; }

.danger-zone { border: 1px solid rgba(248,113,113,0.25); border-radius: var(--radius-lg); padding: var(--space-md); margin-top: var(--space-sm); }

.danger-zone h3 { font-size: 0.9375rem; color: #f87171; margin-bottom: 0.375rem; }

.danger-zone p { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--space-sm); }

/* États */

.c-empty { text-align: center; padding: var(--space-xl) var(--space-md); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-dim); font-size: 0.875rem; }

.c-empty a { color: var(--color-accent-text); }

.c-skel { height: 110px; border-radius: var(--radius-lg); background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: skl 1.4s ease infinite; margin-bottom: var(--space-sm); }

@keyframes skl { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Toast */

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: #202027; border: 1px solid var(--color-border-strong); border-left: 3px solid var(--color-accent); border-radius: 10px; padding: 11px 18px; font-size: 0.8125rem; font-weight: 500; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 300; max-width: min(420px, calc(100vw - 32px)); }

.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 900px) {
            .c-stats { grid-template-columns: repeat(2, 1fr); }
            .c-quick { grid-template-columns: 1fr; }
            .config-specs { grid-template-columns: 1fr 1fr; }
            .hero-top { flex-direction: column; }
            .docket { padding: 1.5rem 1.25rem; }
        }

@media (max-width: 600px) {
            .profile-form .row2 { grid-template-columns: 1fr; }
            .order-total { text-align: left; }
            .ot-step span { font-size: 0.5625rem; }
            .docket-ref { text-align: left; }
        }

/* ============================================================
           IDENTITÉ VISUELLE — refonte premium (cohérente avec le reste du site)
        ============================================================ */



h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); }

.btn-primary:hover { box-shadow: 0 6px 20px rgba(242,140,40, 0.35), 0 0 0 1px rgba(242,140,40, 0.28); }

.btn-primary:active { box-shadow: 0 3px 10px rgba(242,140,40, 0.3); }

.header {
            background: lab(11.8336% -.629619 -2.12872 / 0.5);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
        }

.header.scrolled { background: lab(11.8336% -.629619 -2.12872 / 0.82); }

#btnPanier {
            width: auto; height: 34px; padding: 0 0.875rem;
            border-radius: 7px; border: 1px solid rgba(255,255,255,0.14);
            background: transparent; color: var(--color-text);
            font-size: 0.8125rem; font-weight: 600;
            display: inline-flex; align-items: center; gap: 0.4rem;
            transition: border-color 0.2s, color 0.2s, background 0.2s;
        }

#btnPanier svg { display: none; }

#btnPanier:hover { border-color: var(--color-accent-text); color: var(--color-accent-text); background: rgba(255,255,255,0.03); }

#panierBadge {
            position: static; display: none; align-items: center; justify-content: center;
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--color-accent); color: #151819; font-size: 9px; font-weight: 700; line-height: 1;
        }

.loader { position: fixed; inset: 0; background: var(--color-bg); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 999; transition: opacity 0.5s ease, visibility 0.5s ease; }

.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo { width: 180px; }

.loader-bar-wrap { width: 180px; height: 1px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-top: 1.5rem; overflow: hidden; }

.loader-bar { height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); background-size: 200% 100%; border-radius: 999px; animation: shimmer 1.2s linear infinite; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.pc-timeline { display: flex; align-items: flex-start; margin: var(--space-md) 0 var(--space-sm); position: relative; }

.pc-tl-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }

.pc-tl-line { position: absolute; top: 9px; left: 0; right: 0; height: 2px; z-index: 0; }

.pc-tl-line-bg { position: absolute; inset: 0; background: var(--color-border); }

.pc-tl-line-fill { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(0); transition: transform 0.5s var(--ease); }

.pc-tl-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; transition: border-color 0.4s, background 0.4s; margin-bottom: 0.625rem; }

.pc-tl-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); transition: background 0.4s; }

.pc-tl-step.done .pc-tl-dot { border-color: var(--color-accent-text); background: var(--color-accent); }

.pc-tl-step.done .pc-tl-dot::after { background: #fff; }

.pc-tl-step.active .pc-tl-dot { border-color: var(--color-accent-text); }

.pc-tl-step.active .pc-tl-dot::after { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(242,140,40,0.18); }

.pc-tl-label { font-size: 0.75rem; color: var(--color-text-dim); line-height: 1.35; transition: color 0.4s; }

.pc-tl-step.done .pc-tl-label, .pc-tl-step.active .pc-tl-label { color: var(--color-text-muted); font-weight: 500; }

.pc-tl-step.active .pc-tl-label { color: var(--color-text); }

@media (max-width: 560px) {
            .pc-timeline { flex-wrap: wrap; row-gap: 1.25rem; }
            .pc-tl-step { flex: 0 0 33.33%; }
            .pc-tl-line { display: none; }
        }