/* === Catalogue - Styles généraux === */
body,
.bg-light,
.bg-body-tertiary {
    background-color: #f7fafb !important;
}

.btn-custom {
    background-color: #C3DEDE;
    border-color: #C3DEDE;
    color: #000;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.btn-custom:hover,
.btn-custom:focus {
    background-color: #afcfd0;
    border-color: #afcfd0;
    color: #000;
}

.btn-outline-secondary {
    border-color: #C3DEDE !important;
    color: #253942 !important;
}

.btn-outline-secondary:hover {
    background: #C3DEDE !important;
    color: #253942 !important;
}

/* === Suggestions de recherche === */
#suggestions {
    position: absolute;
    z-index: 1000;
    width: 100%;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

#suggestions li {
    cursor: pointer;
}

#suggestions .list-group-item-action:hover {
    background-color: #C3DEDE;
    color: #253942;
}

/* === Carte produit catalogue === */
.card {
    transition: transform 0.2s;
    border-radius: 18px !important;
}

.card:hover {
    transform: scale(1.03);
}

.card .card-title {
    color: #253942;
    font-weight: 600;
}

.card-footer.bg-transparent {
    border-top: 0;
    background: transparent;
}

/* === Images produits === */
.product-img,
.card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    background: #f8f9fa;
}

.card img {
    max-height: 200px;
    height: 200px;
    object-fit: contain;
    margin: auto;
}

/* === Tabs fiche produit === */
.nav-tabs .nav-link.active {
    background: #C3DEDE;
    color: #253942 !important;
    border-color: #C3DEDE #C3DEDE #fff;
    font-weight: 500;
}

.nav-tabs .nav-link {
    color: #253942;
    font-weight: 400;
}

/* === Tableaux === */
.table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background: #C3DEDE !important;
    color: #253942;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #C3DEDE !important;
}

.table-hover tbody tr:hover {
    background: #E6F4F6;
}

.table-active {
    background-color: #bee3f8 !important;
}

tr.selectable {
    cursor: pointer;
}

/* === Gestion utilisateurs (admin) === */
.emoji {
    font-size: 3rem;
}

.card-title {
    margin-top: 0.8rem;
}

/* === Configurateur de produit style Exaprint === */
.config-box {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 16px #0001;
    margin-bottom: 1.5rem;
}

.cat-block {
    border: 1.5px solid #C3DEDE;
    border-radius: 14px;
    padding: 1.1rem 1.1rem 0.7rem 1.1rem;
    margin-bottom: 1.4rem;
    background: #fafdff;
}

.step-num {
    width: 36px;
    height: 36px;
    background: #C3DEDE;
    color: #253942;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #9FC8CF;
    box-shadow: 0 0 0 2px #C3DEDE55;
}

.config-title {
    color: #253942;
}

.options-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.option-card {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 135px;
      min-height: 48px;
      border-radius: 12px;
      border: 2px solid #C3DEDE;
      margin: 10px;
      font-weight: 500;
      background: #f2fafd;
      cursor: pointer;
      padding: 0.5em 1em;
    }

.option-card.selected {
    background: #C3DEDE !important;
    color: #253942 !important;
    border-color: #6CA1A7;
    box-shadow: 0 3px 16px #B2CFD1aa;
}
.option-card.selected span {
    color: #253942 !important;
    font-weight: bold;
}


.option-card:hover {
    background: #D9F1F3;
    color: #253942;
}

.option-card input[type="radio"] {
      opacity: 0;
      position: absolute;
      pointer-events: auto;
      width: 24px;
      height: 24px;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
    }

/* Pour que la zone soit visible même sans JS ni PHP */
.option-card input[type="radio"] {
    opacity: 0;
    width: 1.2em;
    height: 1.2em;
    margin-right: 7px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* === Badges catalogue et résumé config === */
.badge-catalogue {
    background: #C3DEDE;
    color: #253942;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.38em 0.82em;
    font-size: 0.98em;
}

/* === Bloc prix === */
.price-box {
    background: #eaf6f7;
    border: 2px solid #C3DEDE;
    border-radius: 12px;
    color: #253942;
}

/* === Résumé config === */
#resume {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 10px #0001;
}

/* === Responsive (mobile) === */
@media (max-width: 767px) {

    .product-img,
    .card img {
        height: 180px;
    }

    .config-box {
        padding: 1rem !important;
    }

    .cat-block {
        padding: 0.7rem 0.7rem 0.5rem 0.7rem;
    }

    .options-row {
        gap: 0.4rem;
    }
}
/* catalogue.css */
#resume .badge-catalogue {
    background: #c3dede;
    color: #253942;
    font-weight: bold;
    font-size: 1.25em;
    border-radius: 18px;
    padding: 0.5em 1em;
}

/* === Divers === */
.shadow-sm {
    box-shadow: 0 2px 8px #0001 !important;
}

.rounded,
.rounded-4,
.rounded-12,
.rounded-18,
.rounded-22 {
    border-radius: 12px !important;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: #253942;
    text-decoration: underline;
}