body { overflow-x: hidden; background-color: var(--color-bg); }

.cfg { min-height: 100vh; display: flex; flex-direction: column; padding-top: 64px; }
@media (max-width: 900px) { .cfg { padding-top: 56px; } }

.cfg-top { height: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }

.cfg-top-fill { height: 100%; background: var(--color-accent); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }

.cfg-nav { justify-content: flex-end !important;
            display: flex; align-items: center; justify-content: space-between;
            padding: 1.125rem 2.5rem; border-bottom: 1px solid var(--color-border);
        }

.cfg-nav .logo img { height: 32px; width: auto; display: block; }

.cfg-step-counter { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.04em; }

.cfg-body {
            flex: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center; padding: 3rem 2rem;
        }

.cfg-error {
            display: none; width: 100%; max-width: 580px;
            background: rgba(224,112,112,0.06); border: 1px solid rgba(224,112,112,0.2);
            border-radius: var(--radius); padding: 0.75rem 1rem;
            font-size: 0.8125rem; color: #e07070; margin-bottom: 1rem;
        }

.cfg-panel { width: 100%; max-width: 580px; animation: cfgFadeUp 0.35s cubic-bezier(0.22,1,0.36,1) both; }

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

.cfg-kicker { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 0.75rem; }

.cfg-q { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 600; color: var(--color-text); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 0.5rem; }

.cfg-hint { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 2rem; line-height: 1.6; }

.cfg-opts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.cfg-opt { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.875rem 1.125rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; font-family: inherit; }

.cfg-opt:hover { border-color: var(--color-border-strong); }

.cfg-opt.sel { border-color: var(--color-accent-text); background: rgba(242,140,40,0.07); }

.cfg-opt-label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; }

.cfg-opt-sub { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.4; }

.cfg-opt.sel .cfg-opt-label { color: var(--color-accent-text); }

.cfg-section-lbl { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.625rem; }

.cfg-pref-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.875rem 1.125rem; margin-bottom: 0.75rem; }

.cfg-pref-block-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.75rem; }

.cfg-pref-row { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--color-border); }

.cfg-pref-row:last-child { border-bottom: none; }

.cfg-pref-lbl { font-size: 0.75rem; color: var(--color-text-muted); width: 110px; flex-shrink: 0; }

.cfg-pref-btns { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.cfg-pref-btn { padding: 0.3rem 0.75rem; border-radius: 6px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; }

.cfg-pref-btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.cfg-pref-btn.on { border-color: var(--color-accent-text); color: var(--color-accent-text); background: rgba(242,140,40,0.08); }

.cfg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }

.cfg-fg { margin-bottom: 0.75rem; }

.cfg-lbl { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.375rem; }

.cfg-input, .cfg-ta { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.6875rem 0.875rem; color: var(--color-text); font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color 0.15s; }

.cfg-input:focus, .cfg-ta:focus { border-color: var(--color-accent-text); }

.cfg-ta { min-height: 100px; resize: vertical; }

.cfg-confirm { text-align: center; }

.cfg-check { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(85,200,153,0.3); background: rgba(85,200,153,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }

.cfg-recap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.5rem; text-align: left; }

.cfg-recap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.8125rem; }

.cfg-recap-row:last-child { border-bottom: none; }

.cfg-recap-row span { color: var(--color-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }

.cfg-recap-row strong { color: var(--color-text); font-weight: 500; text-align: right; }

.cfg-confirm-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

.cfg-footer { padding: 1.125rem 2.5rem; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }

.cfg-footer-hint { font-size: 0.6875rem; color: var(--color-text-dim); }

.cfg-footer-hint kbd { font-family: inherit; font-size: 0.625rem; border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 1px 5px; }

.cfg-footer-actions { display: flex; gap: 0.625rem; }

.cfg-btn-back { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5625rem 1.125rem; color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }

.cfg-btn-back:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.cfg-btn-back:disabled { opacity: 0.3; pointer-events: none; }

.cfg-btn-next { background: var(--color-text); border: none; border-radius: var(--radius); padding: 0.5625rem 1.25rem; color: var(--color-bg); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; display: flex; align-items: center; gap: 0.375rem; }

.cfg-btn-next:hover { background: var(--color-accent); }

@media (max-width: 640px) {
            .cfg-nav { justify-content: flex-end !important; padding: 1rem 1.25rem; }
            .cfg-body { padding: 2rem 1.25rem; }
            .cfg-footer { padding: 1rem 1.25rem; }
            .cfg-opts-2 { grid-template-columns: 1fr; }
            .cfg-form-row { grid-template-columns: 1fr; }
            .cfg-footer-hint { display: none; }
        }

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



.cfg-q { font-family: var(--font-display); }

.cfg-btn-next:hover { background: var(--color-accent); color: #151819; }

.cfg-opt.sel .cfg-opt-label { color: var(--color-accent-text); }

#btnPanier {
            position: relative;
            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-family: var(--font-sans);
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            transition: border-color 0.2s, color 0.2s, background 0.2s;
        }

#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;
        }

/* ===== Configurateur : vie et lisibilité ===== */
.cfg-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; padding: 1rem 1.5rem 0; }
.cfg-rail-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-dim); padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: 999px; transition: color 0.3s, background 0.3s; }
.cfg-rail-item b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border-strong); font-size: 0.6875rem; font-weight: 600; }
.cfg-rail-item.done { color: var(--color-text-muted); }
.cfg-rail-item.done b { border-color: var(--color-success); color: var(--color-success); }
.cfg-rail-item.current { color: var(--color-text); background: var(--color-surface); }
.cfg-rail-item.current b { background: var(--color-accent); border-color: var(--color-accent-text); color: #151819; }

.cfg-body { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 3.5rem; padding: 2.5rem 2rem 3rem; }
.cfg-main { width: 100%; max-width: 580px; display: flex; flex-direction: column; align-items: center; }

.cfg-aside { width: 260px; flex-shrink: 0; position: sticky; top: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.cfg-aside-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.cfg-sum { margin: 0; display: grid; }
.cfg-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.8125rem; }
.cfg-sum-row dt { color: var(--color-text-muted); }
.cfg-sum-row dd { margin: 0; color: var(--color-text-dim); text-align: right; }
.cfg-sum-row.filled dd { color: var(--color-text); font-weight: 500; }
.cfg-sum-bar { height: 2px; background: var(--color-border); border-radius: 2px; margin: 1rem 0 0.75rem; overflow: hidden; }
.cfg-sum-bar span { display: block; height: 100%; background: var(--color-accent); transition: width 0.4s var(--ease); }
.cfg-aside-note { font-size: 0.75rem; color: var(--color-text-dim); line-height: 1.5; }

.cfg-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--color-bg-alt); color: var(--color-text-muted); margin-bottom: 0.75rem; transition: color 0.2s; }
.cfg-ico svg { width: 16px; height: 16px; }
.cfg-opt.sel .cfg-ico { color: var(--color-accent-text); }
.cfg-opt { transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.cfg-opt:active { transform: scale(0.985); }

.cfg-tiers { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.cfg-tier { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 1.25rem; cursor: pointer; }
.cfg-tier-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
.cfg-tier-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--color-text); margin-top: 0.5rem; }
.cfg-tier-ship { font-size: 0.75rem; color: var(--color-text-dim); }
.cfg-tier-desc { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0.75rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); line-height: 1.5; }
.cfg-tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cfg-tier-list li { display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.45; }
.cfg-tier-list svg { flex-shrink: 0; margin-top: 3px; width: 13px; height: 13px; color: var(--color-accent-text); }
.cfg-tier.sel { border-color: var(--color-accent-text); }
.cfg-tier.sel::after { content: ''; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }

@media (max-width: 900px) {
    .cfg-body { flex-direction: column; gap: 2rem; padding: 2rem 1.25rem; }
    .cfg-aside { width: 100%; max-width: 580px; position: static; }
    .cfg-tiers { grid-template-columns: 1fr; }
}
.cfg-main { max-width: 680px; }
.cfg-panel { max-width: 100%; }
@media (max-width: 900px) { .cfg-main { max-width: 580px; } }