/* =====================================================
   CONFIGURATEUR ALLIANCE v45 — Style
   -----------------------------------------------------
   v43 :
   - Consolidation des patchs v34/v35/v37/v40.1 en un seul
     état final (fond studio blanc, canvas transparent).
   - Miniatures de finition dynamiques : elles suivent le
     métal sélectionné via --fm1/--fm2/--fm3 (posées en JS).
   - Nouvelle section GRAVURE INTÉRIEURE.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap');

/* ── Polices de gravure Gravograph (v45) ──────────────────
   Déposez vos fichiers de licence dans assets/fonts/ :
     sl-interne.woff2  (+ .woff ou .ttf en secours)
     baby-script.woff2 (+ .woff ou .ttf en secours)
   Tant qu'ils sont absents, replis : Jost / Great Vibes. */
@font-face {
    font-family: 'SL Interne';
    src: url('assets/fonts/sl-interne.woff2') format('woff2'),
         url('assets/fonts/sl-interne.woff') format('woff'),
         url('assets/fonts/sl-interne.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Baby Script';
    src: url('assets/fonts/baby-script.woff2') format('woff2'),
         url('assets/fonts/baby-script.woff') format('woff'),
         url('assets/fonts/baby-script.ttf') format('truetype');
    font-display: swap;
}

* { box-sizing: border-box; }

#ca-configurator-wrap {
    --gold: #c8941f;
    --gold-light: #e0aa30;
    --gold-dark: #a07010;
    --border: #e2e2e2;
    --bg: #f6f6f5;
    --panel-bg: #ffffff;
    --text: #1a1a1a;
    --text-muted: #888;
    --radius: 10px;
    --section-gap: 22px;

    /* Palette des miniatures de finition — mise à jour en JS selon le métal.
       fm1 = ton clair, fm2 = ton moyen, fm3 = ton foncé. */
    --fm1: #f7dd85;
    --fm2: #c9a548;
    --fm3: #8a6a1d;

    font-family: 'Jost', sans-serif;
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0,0,0,0.08);
}

/* ── HEADER ── */
.ca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
}
.ca-header-left h1 {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.12em;
    margin: 0 0 2px 0;
    color: var(--text);
}
.ca-header-left p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.04em;
}
.ca-header-right { display: flex; gap: 12px; }
.ca-btn-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .2s;
}
.ca-btn-icon:hover { border-color: var(--gold); color: var(--gold); }

/* ── MAIN LAYOUT ── */
.ca-main {
    display: grid;
    grid-template-columns: 1fr 440px;
    min-height: 580px;
}

/* ── LEFT: VIEWER (état final consolidé — studio blanc seamless) ── */
.ca-viewer-col {
    background: #f4f3f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 16px;
    position: relative;
}
#ca-canvas-wrap {
    position: relative;
    max-width: 650px;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 48% 42%, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 45%, rgba(245,245,244,.96) 72%, rgba(238,238,236,.92) 100%);
    box-shadow: none;
}
#ca-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: transparent;
}
.ca-viewer-hints {
    display: flex;
    gap: 20px;
    font-size: 11.5px;
    color: #555;
    letter-spacing: 0.02em;
}
.ca-viewer-hints span { display: flex; align-items: center; gap: 5px; }

.ca-model-thumbs {
    display: flex;
    gap: 10px;
}
.ca-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255,255,255,0.94);
    transition: all .2s;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 500;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-thumb:hover { border-color: var(--gold-light); }
.ca-thumb.active { border-color: var(--gold); color: var(--gold); }
.ca-thumb-preview {
    width: 52px;
    height: 28px;
    background: linear-gradient(135deg, var(--fm1), var(--fm3));
    border-radius: 4px;
}
.ca-thumb-demi { clip-path: ellipse(50% 60% at 50% 80%); }
.ca-thumb-ruban { border-radius: 2px; }
.ca-thumb-bombe { clip-path: ellipse(50% 80% at 50% 80%); }

/* ── RIGHT: PANEL ── */
.ca-panel {
    background: var(--panel-bg);
    border-left: 1px solid var(--border);
    padding: 24px 28px;
    overflow-y: auto;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.ca-section { display: flex; flex-direction: column; gap: 12px; }
.ca-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text);
}
.ca-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ca-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

/* ── MODÈLE BUTTONS ── */
.ca-model-btns { display: flex; gap: 8px; }
.ca-model-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.94);
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .2s;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-model-btn svg { width: 56px; height: 20px; }
.ca-model-btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.ca-model-btn.active { border-color: var(--gold); color: var(--gold); background: #fffbf0; }

/* ── MÉTAL GRID ── */
.ca-metal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ca-metal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: none;
    cursor: pointer;
    padding: 4px;
    font-size: 9px;
    letter-spacing: 0.05em;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    color: var(--text-muted);
    transition: all .2s;
}
.ca-swatch {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.4);
    transition: transform .2s, box-shadow .2s;
}
.ca-metal-btn:hover .ca-swatch { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.ca-metal-btn.active { border-color: var(--gold); }
.ca-metal-btn.active .ca-swatch { box-shadow: 0 0 0 3px white, 0 0 0 5px var(--gold); }
.ca-metal-btn span:last-child { text-align: center; line-height: 1.2; }

/* ── SLIDERS ── */
.ca-slider-wrap { display: flex; flex-direction: column; gap: 6px; }
.ca-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--pct, 33%), #ddd var(--pct, 33%));
    outline: none;
    cursor: pointer;
}
.ca-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 6px rgba(200,148,31,0.5);
    cursor: pointer;
    transition: transform .15s;
}
.ca-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ca-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    cursor: pointer;
}
.ca-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 2px;
}
.ca-ticks-2 { justify-content: space-between; }

/* ── ROW 2 COLS ── */
.ca-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    flex-direction: unset !important;
}
.ca-sub-section { display: flex; flex-direction: column; gap: 10px; }

/* ── INTÉRIEUR BUTTONS ── */
.ca-interior-btns { display: flex; gap: 10px; }
.ca-interior-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.94);
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .2s;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-interior-btn svg { width: 56px; height: 16px; }
.ca-interior-btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.ca-interior-btn.active { border-color: var(--gold); color: var(--gold); background: #fffbf0; }

/* ── FINITION BUTTONS ─────────────────────────────────────
   v43 : miniatures réalistes qui suivent le métal choisi
   (--fm1/--fm2/--fm3 mis à jour en JS au clic sur un métal).
   Brillant : poli miroir, bande de lumière spéculaire.
   Brossé   : satiné directionnel, fines stries horizontales.
   Givré    : sablé velouté à grain fin.
   Granité  : martelé, taches d'ombre et de lumière.
   ───────────────────────────────────────────────────────── */
.ca-finish-btns { display: flex; gap: 8px; }
.ca-finish-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.94);
    cursor: pointer;
    font-size: 9px;
    letter-spacing: 0.07em;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .2s;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-finish-preview {
    width: 100%;
    height: 26px;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.18);
    transition: background .25s;
}
.ca-finish-brillant,
.ca-finish-brosse,
.ca-finish-givre,
.ca-finish-granite {
    /* v45 — miniatures photo extraites du visuel de référence
       (assets/finitions/*.jpg). */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.ca-finish-brillant { background-image: url('assets/finitions/brillant.jpg'); }
.ca-finish-brosse   { background-image: url('assets/finitions/brosse.jpg'); }
.ca-finish-givre    { background-image: url('assets/finitions/givre.jpg'); }
.ca-finish-granite  { background-image: url('assets/finitions/granite.jpg'); }

/* Métaux gris / argent : les photos (dorées) sont désaturées et
   légèrement éclaircies pour suivre le métal choisi. */
#ca-configurator-wrap.ca-metal-argente .ca-finish-preview {
    filter: saturate(0.10) brightness(1.10);
}

.ca-finish-btn:hover { border-color: var(--gold-light); }
.ca-finish-btn.active { border-color: var(--gold); background: #fffbf0; }

/* ── RAINURES ───────────────────────────────────────────── */
.ca-mini-link {
    border: 0;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0;
}
.ca-groove-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ca-groove-btn {
    border: 1.5px solid var(--border);
    background: rgba(255,255,255,0.94);
    border-radius: 10px;
    padding: 10px 8px;
    min-height: 88px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--text-muted);
    transition: all .2s ease;
    text-align: center;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-groove-btn:hover { border-color: var(--gold-light); color: var(--gold); }
.ca-groove-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: linear-gradient(180deg, #fffaf0, #fff);
    box-shadow: 0 5px 16px rgba(200,148,31,.10);
}
.ca-groove-icon {
    position: relative;
    display: block;
    width: 72px;
    height: 34px;
    border: 2px solid #c8c8c8;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: linear-gradient(90deg, #fff, #f3f3f3, #fff);
}
.ca-groove-icon:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    width: 8px;
    background: linear-gradient(90deg, #bbb, #eee, #999);
}
.ca-groove-none:after { display: none; }
.ca-groove-v:before {
    content: '';
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #bdbdbd;
    z-index: 2;
}
.ca-groove-u:after {
    width: 10px;
    border-radius: 0 0 9px 9px;
    background: radial-gradient(circle at 50% 0, #f6f6f6, #9d9d9d 70%);
}
.ca-groove-convexe:after {
    width: 14px;
    background: linear-gradient(90deg, #aaa 0 18%, #f8f8f8 45%, #aaa 82% 100%);
}
.ca-groove-angulaire:after {
    width: 12px;
    background: #cfcfcf;
    box-shadow: inset 3px 0 #aaa, inset -3px 0 #eee;
}
.ca-groove-perlee:after {
    width: 12px;
    background:
      radial-gradient(circle at 50% 6px, #f6f6f6 0 4px, #aaa 5px, transparent 6px),
      radial-gradient(circle at 50% 18px, #f6f6f6 0 4px, #aaa 5px, transparent 6px),
      radial-gradient(circle at 50% 30px, #f6f6f6 0 4px, #aaa 5px, transparent 6px);
    background-color: #d5d5d5;
}
.ca-groove-controls {
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 14px;
    background: #fbfbfb;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ca-groove-controls.is-disabled {
    opacity: .45;
    pointer-events: none;
}
.ca-groove-field {
    display: grid;
    grid-template-columns: 1fr 150px;
    align-items: center;
    gap: 12px;
}
.ca-groove-field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ca-groove-field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--text);
}

/* ── GRAVURE INTÉRIEURE (v43) ───────────────────────────── */
.ca-engrave-price-tag { color: var(--gold); font-weight: 600; }
.ca-engrave-field {
    position: relative;
    display: flex;
    align-items: center;
}
.ca-engrave-field input[type="text"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 11px 58px 11px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: border-color .2s;
}
.ca-engrave-field input[type="text"]:focus { border-color: var(--gold); }
.ca-engrave-count {
    position: absolute;
    right: 12px;
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.ca-engrave-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 10px;
}
.ca-engrave-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ca-engrave-fonts { display: flex; gap: 8px; }
.ca-engrave-font-btn {
    flex: 1;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.94);
    cursor: pointer;
    padding: 8px 6px;
    font-size: 15px;
    color: var(--text-muted);
    transition: all .2s;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
}
.ca-engrave-font-btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.ca-engrave-font-btn.active { border-color: var(--gold); color: var(--gold); background: #fffbf0; }
.ca-engrave-symbols { display: flex; gap: 8px; }
.ca-engrave-sym-btn {
    flex: 1;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.94);
    cursor: pointer;
    padding: 7px 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    transition: all .2s;
    box-shadow: 0 1px 8px rgba(0,0,0,0.035);
    font-family: Georgia, 'Times New Roman', serif;
}
.ca-engrave-sym-btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.ca-engrave-sym-btn.active { border-color: var(--gold); color: var(--gold); background: #fffbf0; }
.ca-engrave-preview {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fbfbfb;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 62px;
    justify-content: center;
}
.ca-engrave-preview-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ca-engrave-preview-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px;
    color: #3d3d3d;
    letter-spacing: .04em;
    min-height: 28px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 -1px 1px rgba(0,0,0,0.15);
}

/* ── FOOTER PRICING ── */
.ca-footer {
    background: white;
    border-top: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.ca-footer-badges {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.ca-pricing {
    display: flex;
    gap: 32px;
    align-items: center;
}
.ca-price-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.ca-price-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 500;
}
.ca-price-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.ca-price-total .ca-price-label { color: var(--text); }
.ca-total-val { font-size: 22px; color: var(--gold); font-weight: 700; }
.ca-info-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    cursor: help;
    vertical-align: middle;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .ca-main { grid-template-columns: 1fr; }
    .ca-panel { max-height: none; border-left: none; border-top: 1px solid var(--border); }
    .ca-footer { flex-direction: column; align-items: flex-start; }
    .ca-pricing { flex-wrap: wrap; gap: 16px; }
    .ca-metal-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
    .ca-groove-grid { grid-template-columns: repeat(2, 1fr); }
    .ca-groove-field { grid-template-columns: 1fr; }
    .ca-engrave-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
    .ca-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .ca-metal-grid { grid-template-columns: repeat(4, 1fr); }
    .ca-finish-btns { flex-wrap: wrap; }
    .ca-row-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   v45 — PAIRE D'ALLIANCES
   ══════════════════════════════════════════════════════════ */
.ca-pair-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ca-pair-mode, .ca-pair-tabs { display: flex; gap: 6px; }
.ca-pair-mode-btn, .ca-pair-tab {
    border: 1.5px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}
.ca-pair-mode-btn:hover, .ca-pair-tab:hover { border-color: var(--gold-light); color: var(--text); }
.ca-pair-mode-btn.active, .ca-pair-tab.active {
    border-color: var(--gold);
    background: var(--gold);
    color: #fff;
}
.ca-pair-tab.active { background: var(--gold-dark); border-color: var(--gold-dark); }

/* ══════════════════════════════════════════════════════════
   v45 — BAGUIER VIRTUEL
   ══════════════════════════════════════════════════════════ */
.ca-sizer-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(20, 18, 14, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.ca-sizer-modal[hidden] { display: none; }
.ca-sizer-box {
    position: relative;
    background: var(--panel-bg);
    border-radius: var(--radius);
    padding: 26px 28px;
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    font-family: 'Jost', sans-serif;
}
.ca-sizer-box h3 {
    margin: 0 0 8px;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--text);
}
.ca-sizer-box p { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.ca-sizer-close {
    position: absolute;
    top: 10px; right: 14px;
    border: 0; background: transparent;
    font-size: 26px; line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.ca-sizer-close:hover { color: var(--text); }
.ca-sizer-card-zone {
    display: flex; justify-content: center; align-items: center;
    min-height: 240px; margin-bottom: 14px;
}
#ca-sizer-card {
    width: 330px; height: 208px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 8px 22px rgba(0,0,0,0.18);
}
.ca-sizer-circle-zone {
    display: flex; justify-content: center; align-items: center;
    min-height: 300px; margin-bottom: 14px;
}
#ca-sizer-circle {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 2.5px solid var(--gold);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), inset 0 0 18px rgba(200,148,31,0.12);
}
.ca-sizer-readout { text-align: center; font-size: 14px; color: var(--text); margin: 10px 0 14px; }
.ca-sizer-readout strong { color: var(--gold-dark); font-size: 16px; }
.ca-sizer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ca-sizer-btn {
    display: block;
    margin: 12px auto 0;
    border: 0;
    background: var(--gold);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 11px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.ca-sizer-btn:hover { background: var(--gold-dark); }
.ca-sizer-actions .ca-sizer-btn { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * v46 — UX paire, garde-fous, sauvegarde, conseiller, fiche imprimable
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Cible d'édition (Gauche / Les deux / Droite) ── */

/* ── Barre d'outils paire ── */
.ca-pair-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 8px 14px;
    margin: 0 0 10px;
    background: rgba(200, 148, 31, 0.06);
    border: 1px solid rgba(200, 148, 31, 0.18);
    border-radius: 10px;
    font-size: 12px;
}
.ca-edit-badge {
    font-weight: 600;
    color: var(--gold-dark, #8a6a1d);
    letter-spacing: 0.02em;
}
.ca-pair-actions { display: inline-flex; gap: 6px; }
.ca-mini-btn {
    appearance: none;
    border: 1px solid rgba(120, 110, 90, 0.35);
    background: #fff;
    color: #4a463d;
    border-radius: 7px;
    font: inherit;
    font-size: 11.5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ca-mini-btn:hover { border-color: var(--gold, #c8941f); color: var(--gold-dark, #8a6a1d); }
.ca-mini-btn.active { background: var(--gold, #c8941f); border-color: var(--gold, #c8941f); color: #fff; }

/* ── Badges GAUCHE / DROITE projetés sur la scène ── */
#ca-canvas-wrap { position: relative; }
.ca-ring-badge {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(120, 110, 90, 0.30);
    color: #8a8477;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    padding: 3px 12px;
    pointer-events: none;
    transition: color .2s ease, border-color .2s ease;
    z-index: 3;
}
.ca-ring-badge.active {
    color: var(--gold-dark, #8a6a1d);
    border-color: var(--gold, #c8941f);
    box-shadow: 0 1px 6px rgba(200, 148, 31, 0.25);
}

/* ── Bouton Voir la gravure ── */
.ca-viewer-actions { display: flex; justify-content: center; margin-top: 8px; }
.ca-view-engrave-btn { padding: 7px 16px; }

/* ── Garde-fous métier ── */
.ca-warnings { margin: 10px 0 0; display: grid; gap: 6px; }
.ca-warning-item {
    background: #fdf6e7;
    border: 1px solid #ecd9a8;
    border-left: 3px solid #d8a53a;
    color: #6d5518;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 12px;
}

/* ── Sauvegarde / fiche ── */
.ca-save-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
}
.ca-cta-btn {
    appearance: none;
    border: 0;
    background: var(--gold, #c8941f);
    color: #fff;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    border-radius: 9px;
    padding: 11px 18px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.ca-cta-btn:hover { background: var(--gold-dark, #8a6a1d); }
.ca-cta-btn:active { transform: translateY(1px); }
.ca-cta-btn:disabled { opacity: 0.6; cursor: wait; }
.ca-cta-secondary {
    background: transparent;
    color: var(--gold-dark, #8a6a1d);
    border: 1px solid var(--gold, #c8941f);
}
.ca-cta-secondary:hover { background: rgba(200, 148, 31, 0.10); }
.ca-save-out {
    flex-basis: 100%;
    background: #f6f3ec;
    border: 1px solid rgba(120, 110, 90, 0.25);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}
.ca-config-id {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-dark, #8a6a1d);
    background: rgba(200, 148, 31, 0.10);
    border-radius: 5px;
    padding: 1px 8px;
}
.ca-save-hint { color: #8a8477; font-size: 12px; }

/* ── Panneau conseiller ── */
.ca-adv-panel {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f3f1ea;
    border: 1px dashed rgba(120, 110, 90, 0.40);
    border-radius: 10px;
}
.ca-adv-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #8a8477;
    border: 1px solid rgba(120, 110, 90, 0.35);
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: middle;
    margin-left: 8px;
}
.ca-adv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: #6b6558;
}
.ca-adv-grid label { display: grid; gap: 4px; }
.ca-adv-grid input, .ca-adv-grid textarea {
    font: inherit;
    font-size: 13px;
    border: 1px solid rgba(120, 110, 90, 0.30);
    border-radius: 7px;
    padding: 7px 10px;
    background: #fff;
}
.ca-adv-notes-label { grid-column: 1 / -1; }
.ca-adv-hint { margin: 10px 0 0; font-size: 11.5px; color: #8a8477; }
@media (max-width: 760px) { .ca-adv-grid { grid-template-columns: 1fr; } }

/* ── Fallback WebGL + erreur de chargement ── */
.ca-webgl-fallback {
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    min-height: 320px;
    padding: 24px;
    color: #6b6558;
    background: repeating-linear-gradient(45deg, #f6f3ec, #f6f3ec 14px, #f1eee6 14px, #f1eee6 28px);
    border-radius: 12px;
}
.ca-load-error {
    position: absolute;
    inset: auto 12px 12px;
    background: #fdecec;
    border: 1px solid #e8b4b4;
    color: #8c2f2f;
    border-radius: 9px;
    font-size: 12.5px;
    padding: 9px 12px;
    z-index: 4;
}

/* ── Accessibilité clavier ── */
.ca-pair-mode-btn:focus-visible,

/* ── Fiche imprimable ── */
.ca-print-sheet { display: none; }
@media print {
    body.ca-printing * { visibility: hidden; }
    body.ca-printing .ca-print-sheet,
    body.ca-printing .ca-print-sheet * { visibility: visible; }
    body.ca-printing .ca-print-sheet {
        display: block;
        position: absolute;
        inset: 0;
        padding: 24px;
        background: #fff;
        color: #222;
        font-size: 12px;
        line-height: 1.5;
    }
    .ca-print-head h2 { margin: 0 0 2px; font-size: 20px; }
    .ca-print-head p { margin: 0 0 14px; color: #666; }
    .ca-print-views { display: flex; gap: 10px; margin-bottom: 14px; }
    .ca-print-views figure { margin: 0; text-align: center; }
    .ca-print-views img {
        width: 200px; height: auto;
        border: 1px solid #ddd; border-radius: 6px;
        background: #fafafa;
    }
    .ca-print-views figcaption { font-size: 11px; color: #666; margin-top: 3px; }
    .ca-print-table { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
    .ca-print-table th {
        text-align: left; background: #f4f0e6; padding: 6px 9px;
        border: 1px solid #ddd; font-size: 12px; letter-spacing: 0.04em;
    }
    .ca-print-table td { border: 1px solid #ddd; padding: 5px 9px; vertical-align: top; }
    .ca-print-table td:first-child { width: 130px; color: #666; }
    .ca-print-total { font-size: 14px; margin: 6px 0 14px; }
    .ca-print-adv h3 { margin: 12px 0 6px; font-size: 13px; }
    .ca-print-footnote { margin-top: 16px; color: #777; font-size: 10.5px; border-top: 1px solid #ddd; padding-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * v46.1 — Sélecteur de bague en langage humain + maillon « Ensemble »
 * ══════════════════════════════════════════════════════════════════════════ */

.ca-pair-select {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    margin-left: 10px;
}
.ca-ring-pick {
    appearance: none;
    border: 1.5px solid rgba(120, 110, 90, 0.30);
    background: #fff;
    color: #6b6558;
    border-radius: 10px;
    font: inherit;
    font-size: 12.5px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ca-ring-pick:hover { border-color: var(--gold, #c8941f); }
.ca-ring-pick.active {
    border-color: rgba(200, 148, 31, 0.55);
    background: rgba(200, 148, 31, 0.08);
    color: var(--gold-dark, #8a6a1d);
}
.ca-ring-pick.is-selected {
    border-color: var(--gold, #c8941f);
    background: var(--gold, #c8941f);
    color: #fff;
    box-shadow: 0 2px 10px rgba(200, 148, 31, 0.35);
}
.ca-ring-ico { font-size: 14px; line-height: 1; }
.ca-chain-btn {
    appearance: none;
    border: 1.5px dashed rgba(120, 110, 90, 0.40);
    background: transparent;
    color: #8a8477;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ca-chain-btn:hover { border-color: var(--gold, #c8941f); color: var(--gold-dark, #8a6a1d); }
.ca-chain-btn.active {
    border-style: solid;
    border-color: var(--gold, #c8941f);
    background: rgba(200, 148, 31, 0.14);
    color: var(--gold-dark, #8a6a1d);
    font-weight: 600;
}

/* Badges au-dessus des bagues : cliquables (toucher la bague = la choisir) */
.ca-ring-badge {
    pointer-events: auto;
    cursor: pointer;
}
.ca-ring-badge:hover {
    color: var(--gold-dark, #8a6a1d);
    border-color: var(--gold, #c8941f);
}

/* Impulsion douce sur « Voir la gravure » à la première saisie */
@keyframes caPulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 148, 31, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(200, 148, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 148, 31, 0); }
}
.ca-pulse { animation: caPulse 1.6s ease-out 2; }

@media (max-width: 760px) {
    .ca-pair-select { margin: 8px 0 0; flex-wrap: wrap; }
    .ca-ring-pick { font-size: 11.5px; padding: 7px 11px; }
}

/* ── v46.2 — Prix public simple (transparence désactivée) : total en majesté ── */
.ca-pricing-simple { justify-content: center; }
.ca-pricing-simple .ca-price-total .ca-price-label { font-size: 12px; letter-spacing: 0.16em; }
.ca-pricing-simple .ca-total-val { font-size: 30px; }

/* ══════════════════════════════════════════════════════════════════════════
 * v47 — Mise en page : correctifs structurels + parcours guidé
 * ══════════════════════════════════════════════════════════════════════════ */

/* CORRECTIF CRITIQUE : l'attribut hidden était neutralisé par nos règles
 * display (les outils paire apparaissaient en mode UNE ALLIANCE, les lignes
 * GAUCHE/DROITE traînaient dans le prix). Priorité absolue au hidden. */
#ca-configurator-wrap [hidden] { display: none !important; }

/* Le panneau d'options n'est PLUS un cadre tronqué à 700 px : la page
 * défile naturellement, et le viewer 3D reste visible en accompagnant le
 * défilement (colonne collante) — standard des configurateurs premium. */
.ca-panel {
    max-height: none;
    overflow-y: visible;
}
@media (min-width: 901px) {
    .ca-viewer-col {
        position: sticky;
        top: 18px;
        align-self: start;
    }
}

/* Bandeau de prix TOUJOURS visible : le total accompagne chaque choix. */
.ca-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 24px rgba(60, 50, 20, 0.08);
}

/* Étapes numérotées : le parcours se lit d'un coup d'œil. */
.ca-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--gold, #c8941f);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
    flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * v47.1 — Mode kiosque + micro-interactions
 * ══════════════════════════════════════════════════════════════════════════ */

.ca-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    appearance: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(120, 110, 90, 0.25);
    background: rgba(255, 255, 255, 0.82);
    color: #6b6558;
    font-size: 16px;
    cursor: pointer;
    transition: all .15s ease;
}
.ca-fs-btn:hover { border-color: var(--gold, #c8941f); color: var(--gold-dark, #8a6a1d); }

#ca-configurator-wrap:fullscreen {
    overflow-y: auto;
    background: #f6f4ef;
    padding: 18px 26px;
}
#ca-configurator-wrap:fullscreen .ca-main { max-width: 1500px; margin: 0 auto; }
#ca-configurator-wrap:fullscreen #ca-canvas-wrap { min-height: 56vh; }

/* Le total qui glisse mérite une couleur qui respire */
.ca-total-val { transition: color .2s ease; }

/* ══════════════════════════════════════════════════════════════════════════
 * v48 — Barre paire aérée + viewer écrin
 * ══════════════════════════════════════════════════════════════════════════ */

/* La barre paire respire : mode centré, sélecteur de bague en dessous,
 * chacun sur sa rangée — plus de bousculade en fin de ligne. */
.ca-pair-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ca-pair-select { margin-left: 0; }
.ca-pair-tools {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

/* Le viewer devient un écrin : voile radial + vignette douce. */
#ca-canvas-wrap {
    background:
        radial-gradient(ellipse 120% 90% at 50% 30%, #ffffff 0%, #f7f5f0 58%, #efece4 100%);
    border-radius: 14px;
    box-shadow: inset 0 0 60px rgba(120, 100, 60, 0.05);
}

/* Badges plus proches des bagues, plus discrets tant qu'inactifs */
.ca-ring-badge { font-size: 10px; padding: 2px 10px; opacity: 0.85; }
.ca-ring-badge.active { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
 * v48.1 — DESIGN PREMIUM « MAISON DE JOAILLERIE »
 * Couche esthétique cohérente : typographie de maison, or champagne,
 * hairlines, respiration. Les variables --gold restent pilotées par la
 * marque blanche du back-office.
 * ══════════════════════════════════════════════════════════════════════════ */

#ca-configurator-wrap {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.01em;
    color: #3d3a33;
    background: #faf9f6;
}

/* En-tête de maison : surtitre discret + titre serif */
.ca-header h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.06em;
    color: #2e2b24;
}
.ca-header p {
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #a89e8a;
}

/* Titres de sections : petites capitales espacées, hairline dorée */
.ca-panel .ca-section-title {
    font-size: 11px;
    letter-spacing: 0.20em;
    color: #7c7566;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(176, 141, 62, 0.18);
    width: 100%;
}
.ca-step-n {
    width: 21px;
    height: 21px;
    background: transparent;
    border: 1.4px solid var(--gold, #b08d3e);
    color: var(--gold-dark, #8a6a1d);
    font-weight: 600;
}

/* Boutons de choix : pilules hairline, remplissage doux à l'actif */
.ca-model-btn, .ca-interior-btn, .ca-groove-btn,
.ca-engrave-font-btn, .ca-engrave-sym-btn {
    border-radius: 12px;
    border-width: 1px;
    transition: all .18s ease;
}
.ca-model-btn.active, .ca-interior-btn.active, .ca-groove-btn.active,
.ca-engrave-font-btn.active, .ca-engrave-sym-btn.active {
    box-shadow: 0 4px 14px rgba(176, 141, 62, 0.20);
}

/* Métaux : pastilles précieuses */
.ca-metal-btn .ca-swatch {
    width: 34px;
    height: 34px;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.7), 0 2px 6px rgba(60,50,20,0.18);
}
.ca-metal-btn.active .ca-swatch {
    outline: 2px solid var(--gold, #b08d3e);
    outline-offset: 3px;
}

/* Finitions : tuiles matière avec liseré doré à l'actif */
.ca-finish-btn { border-radius: 12px; overflow: hidden; }
.ca-finish-btn.active { box-shadow: 0 0 0 2px var(--gold, #b08d3e), 0 6px 16px rgba(176,141,62,0.22); }

/* Curseurs : piste fine, pouce bijou */
.ca-slider { height: 3px; }
.ca-slider::-webkit-slider-thumb {
    width: 18px; height: 18px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(120, 95, 35, 0.45);
}

/* Prix : le total en serif de maison */
.ca-price-label { letter-spacing: 0.18em; color: #a89e8a; }
.ca-total-val {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 30px;
    color: var(--gold-dark, #8a6a1d);
}
.ca-pricing-simple .ca-total-val { font-size: 38px; }

/* Boutons d'action : or mat, hover profond */
.ca-cta-btn {
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    padding: 13px 26px;
    box-shadow: 0 6px 18px rgba(176, 141, 62, 0.28);
}
.ca-cta-secondary { box-shadow: none; }
.ca-mini-btn { border-radius: 999px; }

/* Sélecteur de paire : cohérent avec la maison */
.ca-pair-mode-btn { border-radius: 999px; letter-spacing: 0.12em; }
.ca-ring-pick { border-radius: 999px; }
.ca-chain-btn { letter-spacing: 0.06em; }

/* Écrin 3D : cadre bijoutier */
#ca-canvas-wrap {
    border: 1px solid rgba(176, 141, 62, 0.14);
    box-shadow:
        inset 0 0 70px rgba(120, 100, 60, 0.05),
        0 18px 44px -18px rgba(60, 50, 20, 0.18);
}
.ca-fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Alerte garde-fou : ton bijoutier, pas ton administratif */
.ca-warning-item { border-radius: 10px; font-family: "Jost", sans-serif; }

/* Focus visibles dorés partout (déjà en place), sélection de texte or pâle */
#ca-configurator-wrap ::selection { background: rgba(200, 160, 70, 0.25); }

/* ══════════════════════════════════════════════════════════════════════════
 * v49 — Aides d'étapes, annulation, reprise, notes de prix
 * ══════════════════════════════════════════════════════════════════════════ */

.ca-help-btn {
    appearance: none;
    width: 17px; height: 17px;
    margin-left: 8px;
    border-radius: 50%;
    border: 1.2px solid rgba(176, 141, 62, 0.5);
    background: transparent;
    color: var(--gold-dark, #8a6a1d);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: all .15s ease;
}
.ca-help-btn:hover { background: var(--gold, #b08d3e); color: #fff; border-color: var(--gold, #b08d3e); }

#ca-configurator-wrap { position: relative; }
.ca-help-pop {
    position: absolute;
    z-index: 30;
    max-width: 280px;
    padding: 12px 15px;
    background: #2e2b24;
    color: #f4efe4;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(30, 25, 12, 0.35);
}

.ca-price-notes {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    padding: 4px 4px 0;
    font-size: 11.5px;
    color: #a89e8a;
    letter-spacing: 0.04em;
}

.ca-load-input {
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(120, 110, 90, 0.35);
    border-radius: 7px;
    padding: 6px 10px;
    width: 140px;
}
.ca-load-msg { color: #8a6a1d; font-size: 12px; }
.ca-btn-icon:disabled { opacity: 0.4; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
 * v51 — ÉDITION VENDABLE : charbon & or, épuré, ère du temps
 * Direction : blanc cassé généreux, hairlines sable, actions CHARBON,
 * l'or (marque blanche) réservé aux accents précieux — la grammaire des
 * maisons de joaillerie contemporaines.
 * ══════════════════════════════════════════════════════════════════════════ */

#ca-configurator-wrap {
    --ink: #211e19;
    --ink-soft: #4a463f;
    --sand: #e9e2d2;
    background: #fcfbf8;
}

/* Actions principales : charbon profond, l'or au survol seulement */
.ca-cta-btn {
    background: var(--ink);
    box-shadow: 0 8px 22px -8px rgba(20, 16, 8, 0.45);
}
.ca-cta-btn:hover { background: #000; }
.ca-cta-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--sand);
    box-shadow: none;
}
.ca-cta-secondary:hover {
    border-color: var(--gold, #b08d3e);
    color: var(--gold-dark, #8a6a1d);
    background: transparent;
}

/* Sélecteurs de mode : charbon actif, hairline sable au repos */
.ca-pair-mode-btn { border: 1px solid var(--sand); color: var(--ink-soft); background: #fff; }
.ca-pair-mode-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ca-ring-pick { border-color: var(--sand); }
.ca-ring-pick.is-selected { background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 16px -6px rgba(20,16,8,0.4); }

/* Panneaux et cartes : hairlines sable, ombres retirées */
.ca-panel { border-left-color: var(--sand); }
.ca-panel .ca-section-title { color: #8d8574; border-bottom-color: var(--sand); }
.ca-model-btn, .ca-interior-btn, .ca-groove-btn,
.ca-engrave-font-btn, .ca-finish-btn { border-color: var(--sand); }
.ca-model-btn.active, .ca-interior-btn.active, .ca-groove-btn.active,
.ca-engrave-font-btn.active {
    border-color: var(--ink);
    background: #f7f4ec;
    box-shadow: none;
    color: var(--ink);
}
.ca-finish-btn.active { box-shadow: 0 0 0 1.5px var(--ink); }

/* Étapes : médaillon charbon filaire */
.ca-step-n { border-color: var(--ink-soft); color: var(--ink-soft); }

/* Curseurs : piste sable, pouce charbon cerclé d'or */
.ca-slider { background: var(--sand); }
.ca-slider::-webkit-slider-thumb {
    background: var(--ink);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px var(--gold, #b08d3e), 0 3px 8px rgba(20,16,8,0.35);
}

/* Prix : chiffres charbon, le TOTAL seul porte l'or */
.ca-price-val { color: var(--ink); }
.ca-total-val { color: var(--gold-dark, #8a6a1d); }

/* Outils paire, chips, badges : hairline + charbon */
.ca-mini-btn { border-color: var(--sand); color: var(--ink-soft); }
.ca-mini-btn:hover { border-color: var(--ink); color: var(--ink); }
.ca-chain-btn.active { background: #f4efe3; }
.ca-ring-badge { border-color: var(--sand); color: var(--ink-soft); background: rgba(255,255,255,0.92); }
.ca-ring-badge.active { border-color: var(--gold, #b08d3e); color: var(--gold-dark, #8a6a1d); }

/* Écrin : fond porcelaine, filet sable */
#ca-canvas-wrap {
    background: radial-gradient(ellipse 120% 90% at 50% 28%, #ffffff 0%, #faf8f3 55%, #f1ede4 100%);
    border-color: var(--sand);
    box-shadow: inset 0 0 60px rgba(120, 100, 60, 0.04), 0 22px 48px -24px rgba(40, 32, 16, 0.16);
}

/* Aides et alertes dans la même voix */
.ca-help-btn { border-color: #cfc6b2; color: var(--ink-soft); }
.ca-help-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ca-warning-item { background: #fbf7ec; border-color: #eadfc2; border-left-color: var(--gold, #b08d3e); color: #6d5c33; }

/* En-tête : respiration */
.ca-header { padding-bottom: 6px; }
.ca-header h1 { letter-spacing: 0.04em; }

/* ── v52 — signal d'accueil du sélecteur de paire ── */
@keyframes caIntroPick {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176, 141, 62, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(176, 141, 62, 0.22); }
}
.ca-pair-select.ca-intro .ca-ring-pick { animation: caIntroPick 1.2s ease-in-out 2; }