/* =============================================================
   Quinquete Configurateur — Frontend
   ============================================================= */

#qc-app {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px 40px;
    font-family: inherit;
}

/* ---- Progression ---- */
.qc-progress-wrap { margin-bottom: 28px; }

.qc-progress-bar {
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
}
.qc-progress-inner {
    height: 100%;
    background: #2c2c2c;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.qc-progress-text {
    margin-top: 8px;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---- Titre étape ---- */
.qc-step-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
}

/* ---- Grille d'options ---- */
.qc-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 230px));
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.qc-type-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin: 0 auto; }

/* ---- Carte option ---- */
.qc-option-card {
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    background: #fff;
    user-select: none;
}
.qc-option-card:hover {
    border-color: #aaa;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.qc-option-card.qc-selected {
    border-color: #2c2c2c;
    box-shadow: 0 0 0 2px #2c2c2c;
}

.qc-option-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    display: block;
}
.qc-no-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 40px;
}

.qc-card-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: 5px;
}
.qc-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 6px;
}
.qc-card-price {
    font-size: 12px;
    font-weight: 600;
    color: #2c2c2c;
    background: #f5f5f5;
    border-radius: 3px;
    padding: 3px 8px;
    display: inline-block;
    margin-top: 4px;
}

/* ---- Dimensions / Épaisseur ---- */
.qc-dims-form {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 20px;
}
.qc-dim-group { flex: 1; min-width: 220px; }

.qc-dim-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #333;
    margin-bottom: 10px;
}
.qc-dim-control { display: flex; align-items: center; gap: 12px; }

.qc-dim-select, .qc-ep-select {
    font-size: 16px;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
    appearance: auto;
}
.qc-dim-select:focus, .qc-ep-select:focus { border-color: #2c2c2c; outline: none; }

.qc-dim-note {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}
.qc-dim-max {
    font-size: 12px;
    color: #aaa;
    margin: 8px 0 0;
    font-style: italic;
}

/* ---- Prix inline ---- */
.qc-price-inline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 28px;
    padding: 16px 20px;
    background: #f7f7f7;
    border-radius: 6px;
    border-left: 4px solid #2c2c2c;
    font-size: 15px;
}
.qc-price-label   { color: #666; font-size: 13px; }
.qc-price-ht      { font-size: 24px; font-weight: 700; color: #2c2c2c; }
.qc-price-sep     { color: #aaa; font-size: 13px; }
.qc-price-ttc-wrap { color: #888; font-size: 13px; }

/* ---- Navigation ---- */
.qc-nav {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-bottom: 40px;
}

.qc-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .1s;
    letter-spacing: .02em;
}
.qc-btn:active { transform: scale(.98); }
.qc-btn:disabled { opacity: .4; cursor: not-allowed; }

.qc-btn-prev {
    background: #f0f0f0;
    color: #333;
}
.qc-btn-prev:hover:not(:disabled) { background: #e0e0e0; }

.qc-btn-next {
    background: #2c2c2c;
    color: #fff;
    flex: 1;
    text-align: center;
}
.qc-btn-next:hover:not(:disabled) { background: #111; }

/* ---- Récapitulatif ---- */
.qc-recap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .qc-recap { grid-template-columns: 1fr; } }

.qc-recap h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #555;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.qc-recap-choices,
.qc-recap-price,
.qc-recap-delivery,
.qc-recap-notice,
.qc-cta-block,
.qc-devis-form {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 20px;
}
.qc-recap-notice,
.qc-cta-block,
.qc-devis-form { grid-column: 1 / -1; }

.qc-recap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.qc-recap-table td { padding: 8px 6px; border-bottom: 1px solid #f5f5f5; }
.qc-recap-step { font-weight: 600; color: #666; width: 42%; }
.qc-price-val { text-align: right; font-weight: 600; }
.qc-price-total td {
    font-weight: 700;
    font-size: 16px;
    border-top: 2px solid #2c2c2c;
    border-bottom: none;
    padding-top: 12px;
}

/* Livraison */
.qc-delivery-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    cursor: pointer;
}

/* Notice client */
.qc-recap-notice {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    border-left: 3px solid #2c2c2c;
    padding-left: 16px;
}

/* ---- Deux CTA ---- */
.qc-cta-block {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 580px) { .qc-cta-block { flex-direction: column; } }

.qc-cta-devis,
.qc-cta-cart {
    flex: 1;
    padding: 18px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .12s, opacity .2s;
    text-align: center;
    letter-spacing: .02em;
}
.qc-cta-devis:active,
.qc-cta-cart:active  { transform: scale(.98); }
.qc-cta-devis:disabled,
.qc-cta-cart:disabled { opacity: .5; cursor: not-allowed; }

.qc-cta-devis {
    background: #fff;
    color: #2c2c2c;
    border: 2px solid #2c2c2c;
}
.qc-cta-devis:hover:not(:disabled) { background: #f5f5f5; }

.qc-cta-cart {
    background: #2c2c2c;
    color: #fff;
    border: 2px solid #2c2c2c;
}
.qc-cta-cart:hover:not(:disabled) { background: #111; }

/* ---- Formulaire devis ---- */
.qc-devis-form h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a1a;
}
.qc-form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
@media (max-width: 580px) { .qc-form-2col { grid-template-columns: 1fr; } }

.qc-form-row { margin-bottom: 16px; }
.qc-form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.qc-req { color: #c00; }

.qc-text-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .2s;
    font-family: inherit;
}
.qc-text-input:focus { border-color: #2c2c2c; outline: none; }
textarea.qc-text-input { resize: vertical; }

.qc-btn-submit-devis {
    margin-top: 8px;
    padding: 12px 32px;
    background: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.qc-btn-submit-devis:hover:not(:disabled) { background: #111; }
.qc-btn-submit-devis:disabled { opacity: .5; cursor: not-allowed; }

/* Messages */
.qc-msg-success, .qc-msg-error {
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 16px;
}
.qc-msg-success { background: #eefaee; color: #1a6b1a; border: 1px solid #aedcae; }
.qc-msg-error   { background: #fef2f2; color: #9b1c1c; border: 1px solid #f0a0a0; }

/* ---- Page configurateur non disponible ---- */
.qc-unavailable {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 580px) {
    .qc-options-grid { grid-template-columns: repeat(2, 1fr); }
    .qc-type-grid    { grid-template-columns: 1fr; }
    .qc-price-bar    { font-size: 13px; }
    .qc-price-ht     { font-size: 17px; }
    .qc-nav          { flex-direction: column; }
    .qc-btn-prev     { order: 2; }
    .qc-btn-next     { order: 1; }
}

/* ---- Slider dimensions ---- */
.qc-dim-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.qc-dim-val {
    font-size: 20px;
    font-weight: 700;
    color: #2c2c2c;
}
.qc-dim-range, .qc-ep-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin-bottom: 8px;
}
.qc-dim-range::-webkit-slider-thumb, .qc-ep-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2c2c2c;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
    transition: transform .1s;
}
.qc-dim-range::-webkit-slider-thumb:hover, .qc-ep-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.qc-dim-range::-moz-range-thumb, .qc-ep-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2c2c2c;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
.qc-dim-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #bbb;
    margin-bottom: 6px;
}

.qc-dims-full .qc-dim-group { flex: 1 1 100%; min-width: 0; }

/* ---- Notice sur devis ---- */
.qc-devis-only-notice {
    font-size: 13px;
    color: #7a5c00;
    background: #fffbea;
    border: 1px solid #f0d060;
    border-left: 4px solid #e6b800;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 12px;
}