/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Panier : le bouton "Transformer ce panier en devis" (module opartdevis) reprend
   le même gabarit que "Commander" / "Ajouter au devis" (équivalent btn-lg btn-block mt-1) */
.cart-detailed-actions a[href*="createquotation"] {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0;
    margin-top: 4px;
}


 .alert-info {
    --bs-alert-color: #0f172a;
    --bs-alert-bg: rgb(240 240 240);
    --bs-alert-border-color: rgb(83 83 83);
}

/* Conteneur principal */
.image_home .elementor-iqit-banner {
    overflow: hidden;
    border-radius: 15px;
    /* Selon ta maquette */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    /* Fix pour certains navigateurs sur l'overflow + radius */
}

#index #wrapper {padding-top: 0 !important;}
 
/* Ciblage via la classe parente pour impacter toutes les colonnes du carrousel */
.carroussel-home .elementor-column-wrap.elementor-element-populated {
    background-color: rgba(3, 24, 46, 0.4) !important; /* Votre couleur (ex: bleu marine transparent) */
    background-blend-mode: multiply !important;      /* Fusionne la couleur et l'image */
}

/* Effet de zoom sur l'image au survol */
.image_home .elementor-iqit-banner-img img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    width: 100%;
    height: auto;
    display: block;
}

.image_home .elementor-iqit-banner:hover .elementor-iqit-banner-img img {
    transform: scale(1.15);
}

/* Le dégradé sombre en bas pour la lisibilité */
.image_home .elementor-iqit-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Positionnement du contenu */
.image_home .elementor-iqit-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 25px;
    z-index: 2;
}

/* Le séparateur blanc (petit trait) au-dessus du titre */
.image_home .elementor-iqit-banner-title::before {
    content: "";
    display: block;
    width: 35px;
    /* Largeur du trait */
    height: 3px;
    /* Épaisseur du trait */
    background-color: #ffffff;
    margin-bottom: 12px;
    /* Espace sous le trait */
    border-radius: 2px;
}

/* Style du titre */
.image_home .elementor-iqit-banner-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    /* Légère ombre pour plus de punch */
}

#inner-wrapper {
    background-color: #fff;
}

#wrapper {
    background-color: #fff;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    background-color: #8f172a;
}

/* --- Sidebar Filters & Cards Styling --- */
.block-side-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 30px;
    /* Large rounded corners as per mockup */
    padding: 25px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    margin-bottom: 2rem;
}

/* #search_filters now uses its own flat "block-facets" look below,
   instead of the rounded/shadowed card above (see codi-facets-*). */

.facets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.custom-codigel-header .header-icon-item i {
    color: #222;
}

.header-top a:not(.btn):not(.nav-link) {
    color: #222;
}

.header-account-wrapper>a>span.ml-2.mr-2 {
    color: #FFF;
}

#desktop-header>div.header-bottom-menu.py-2>div>div>div.col-auto.pl-0>a>span {
    color: #222;
}

.facets-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.facets-clear {
    color: #dc2626 !important;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.red-icon {
    color: #dc2626;
}

.facet {
    border: none;
    padding: 0;
    margin-bottom: 25px;
}

.facet-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    color: #94a3b8;
    /* Blue-grey color as per mockup */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
    letter-spacing: 0.025em;
}

.facet-title .drop-icon {
    font-size: 1rem;
    color: #cbd5e1;
    transition: transform 0.3s;
}

.facet-title[aria-expanded="false"] .drop-icon {
    transform: rotate(-90deg);
}

.facet-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #475569;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 500;
}

.facet-label:hover {
    color: #1e293b;
}

.facet-label a {
    color: inherit;
}

.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
    background: #fff;
    transition: all 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked {
    background-color: #fff;
    border-color: #64748b;
}

.custom-checkbox .fa-check {
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 10px;
    color: #64748b;
    display: none;
}

.custom-checkbox input[type="checkbox"]:checked+span .fa-check {
    display: block;
}

/* Specific styling for Buttons (Air/Eau) */
.facet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0;
    list-style: none;
}

.facet-buttons .button-item {
    margin: 0;
}

.facet-buttons .facet-label {
    padding: 8px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.2s;
    margin-bottom: 0;
}

.facet-buttons .facet-label.active {
    border-color: #0f172a;
    background: #f4f6f8;
}

.facet-buttons .custom-checkbox,
.facet-buttons .custom-radio {
    display: none;
}

.facet-buttons .facet-label a {
    text-decoration: none;
}

/* =============================================
   CATEGORY TREE — styled like the facets sidebar
   (scoped classes so the real ps_facetedsearch
   block elsewhere is left untouched)
   ============================================= */
.codi-cat-facet {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eef2f6;
}

.codi-cat-facet-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #0f172a;
    margin-bottom: 14px;
}

.codi-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.codi-cat-sublist {
    padding-left: 28px;
    margin-top: 2px;
}

.codi-cat-item {
    margin-bottom: 2px;
}

.codi-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.codi-cat-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.codi-cat-link:hover {
    color: #0f172a;
}

.codi-cat-link.active {
    color: #0f172a;
    font-weight: 700;
}

.codi-cat-checkbox {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}

.codi-cat-checkbox i {
    font-size: 9px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
}

.codi-cat-checkbox.checked {
    background-color: #dc2626;
    border-color: #dc2626;
}

.codi-cat-checkbox.checked i {
    opacity: 1;
}

.codi-cat-toggle {
    flex: 0 0 auto;
    cursor: pointer;
    color: #cbd5e1;
    padding: 7px 4px;
}

/* =============================================
   CATEGORY HEADER — eyebrow + title + clamped
   description, continuation below the listing
   ============================================= */
.codi-cat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 32px 0 28px;
}

.codi-cat-header-title {
    flex: 1 1 auto;
    min-width: 260px;
}

.codi-cat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #dc2626;
    margin-bottom: 10px;
}

.codi-cat-eyebrow-bar {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: #dc2626;
}

.codi-cat-h1 {
    margin: 0;
    font-weight: 800;
    font-size: 2.75rem!important;
    line-height: 1.05;
    border-bottom: solid 0px #e3e3e3!important;
    margin-bottom: 0px!important;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.codi-cat-header-desc {
    flex: 0 1 420px;
    padding-top: 6px;
}

.codi-cat-desc-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: #485361;
    font-size: 1.15rem;
    line-height: 1.6;
}

.codi-cat-more-link {
    display: inline-block;
    margin-top: 8px;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.codi-cat-more-link:hover {
    text-decoration: underline;
}

.codi-cat-footer-desc {
    padding: 32px 0;
    border-top: 1px solid #eef2f6;
    margin-top: 24px;
}

.codi-cat-footer-desc .rte-content {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .codi-cat-header {
        flex-direction: column;
        gap: 16px;
    }
    .codi-cat-h1 {
        font-size: 2rem;
    }
    .codi-cat-header-desc {
        flex: 1 1 auto;
    }
}

/* =============================================
   CATEGORY SUBCATEGORIES GRID — pages catégories
   principales sans liste de produits
   ============================================= */
.codi-subcat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 8px 0 48px;
}

.codi-subcat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.codi-subcat-image {
    background-color: #f4f4f5;
    border: 1px solid #ececee;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.codi-subcat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

.codi-subcat-card:hover .codi-subcat-image img {
    transform: scale(1.04);
}

.codi-subcat-name {
    font-weight: 800;
    font-size: 1.15rem;
    color: #0f172a;
    margin-bottom: 6px;
}

.codi-subcat-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
}

.codi-subcat-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #dc2626;
    border-radius: 50%;
    color: #dc2626;
    font-size: 0.8rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .codi-subcat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .codi-subcat-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   PAGES CATÉGORIES PRINCIPALES SANS LISTE DE
   PRODUITS — pas de colonne filtres, page pleine
   largeur. IDs : 4477, 4490, 4505, 4508, 4592,
   5746, 5771 (voir $codi_subcat_only_category_ids
   dans category.tpl)
   ============================================= */
body.category-id-4477 #left-column,
body.category-id-4490 #left-column,
body.category-id-4505 #left-column,
body.category-id-4508 #left-column,
body.category-id-4592 #left-column,
body.category-id-5746 #left-column,
body.category-id-5771 #left-column {
    display: none;
}

body.category-id-4477 #content-wrapper,
body.category-id-4490 #content-wrapper,
body.category-id-4505 #content-wrapper,
body.category-id-4508 #content-wrapper,
body.category-id-4592 #content-wrapper,
body.category-id-5746 #content-wrapper,
body.category-id-5771 #content-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
}

/* =============================================
   CATEGORY BANNER — titre + image, au-dessus du
   fil d'ariane, sur les mêmes pages que ci-dessus
   ============================================= */
.codi-cat-banner {
    background-color: #f4f4f5;
}

.codi-cat-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding: 40px 0;
}

.codi-cat-banner-title {
    margin: 0;
    font-weight: 800;
    font-size: 2.25rem;
    color: #0f172a;
    padding-bottom: 14px;
    position: relative;
}

.codi-cat-banner-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 4px;
    background: #dc2626;
}

.codi-cat-banner-image {
    flex: 0 1 420px;
    max-height: 240px;
    overflow: hidden;
}

.codi-cat-banner-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.codi-cat-divider {
    border: none;
    border-top: 1px solid #ececee;
    margin: 24px 0;
}

.codi-cat-intro {
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 28px;
}

@media (max-width: 700px) {
    .codi-cat-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 0;
    }
    .codi-cat-banner-image {
        max-width: 100%;
        flex-basis: auto;
    }
    .codi-cat-banner-title {
        font-size: 1.75rem;
    }
}

/* =============================================
   FACETED SEARCH — block-facets look
   (real ps_facetedsearch filters: checkbox,
   radio, dropdown and slider widgets)
   ============================================= */
#search_filters {
    padding: 0;
}

.codi-facets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.codi-facets-title {
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f172a;
}

.codi-facets-clear {
    color: #dc2626;
    font-weight: 700;
    font-size: 0.75rem;
    text-decoration: none;
}

.codi-facets-clear:hover {
    text-decoration: underline;
}

.codi-facet {
    border: none;
    padding: 0;
    margin: 0 0 4%;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f6;
}

.codi-facet:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.codi-facet-title {
    font-weight: 900!important;
    font-size: 1rem!important;
    border-bottom: solid 0px #e3e3e3!important;
    color: #0f172a!important;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 5px;
}

.codi-facet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.codi-facet-item {
    margin-bottom: 2px;
}

.codi-facet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    cursor: pointer;
}

.custom-checkbox input[type=checkbox] {
    margin-top: 0px;}

.codi-facet-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
    padding: 2px 0;
    color: #475569;
    font-size: 1rem !important;
    font-weight: 500;
    text-decoration: none !important;
}

#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet {
    padding-top: 0.5rem;
}

.codi-facet-row:hover .codi-facet-link,
.codi-facet-row.active .codi-facet-link {
    color: #0f172a !important;
}

.codi-facet-row.active .codi-facet-name {
    font-weight: 700;
}

.codi-facet-count {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Checkbox / radio squares — red when checked, matching the category list */
.codi-facet-checkbox {
    flex: 0 0 auto;
}

.codi-facet-checkbox input[type="checkbox"],
.codi-facet-checkbox input[type="radio"] {
    width: 17px;
    height: 17px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
}

.codi-facet-radio input[type="radio"] {
    border-radius: 50%;
}

.codi-facet-checkbox input[type="checkbox"]:checked,
.codi-facet-checkbox input[type="radio"]:checked {
    background-color: #dc2626;
    border-color: #dc2626;
}

.codi-facet-checkbox .fa-check {
    color: #fff;
}

/* Price / weight slider */
.codi-facet-slider {
    list-style: none;
    margin: 0;
    padding: 0;
}

.codi-facet-slider-label {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
}

#search_filters .noUi-target {
    background: #e2e8f0;
    border: none;
    box-shadow: none;
}

#search_filters .noUi-connect {
    background: #dc2626 !important;
}

#search_filters .noUi-horizontal .noUi-handle {
    width: 16px !important;
    height: 16px !important;
    top: -6px !important;
    right: -8px !important;
    border-radius: 50% !important;
    border: 2px solid #dc2626 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* =============================================
   PRODUCT MINIATURE CARDS
   ============================================= */

/* --- Card Base --- */
.product-miniature-default {
    background: #ffffff;
    border-radius: 0px;
    border: 0px solid #f1f5f9;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px;
}

div.js-product-miniature-wrapper {
    padding: 8px !important;
}

.product-miniature-default:hover {
    border-color: #dc2626;
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.12);
}

/* --- Thumbnail Area --- */
.product-miniature-default .thumbnail-container {
    background: #fff;
    border-radius: 0;
    margin: 0px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-miniature-default .thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.product-miniature-default:hover .thumbnail-container img {
    transform: scale(1.05);
}

/* No-photo placeholder: diagonal stripes + watermark, only when the
   product has no real cover image (never drawn over an actual photo). */
.product-miniature-default .thumbnail-container.no-image {
    background-color: #f4f6f8;
    background-image: repeating-linear-gradient(125deg, rgba(15, 23, 42, 0.04) 0 1px, transparent 1px 22px);
}

.product-miniature-default .thumbnail-container.no-image::after {
    content: "VISUEL";
    position: absolute;
    right: 12px;
    bottom: 10px;
    font: 700 10px/1 monospace;
    letter-spacing: 0.14em;
    color: #94a3b8;
    text-transform: uppercase;
    z-index: 1;
}

/* --- Badges / Flags --- */
.product-miniature-default .product-flags {
    position: absolute;
    top: 12px;
    right: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 5;
}

.product-miniature-default .product-flag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fff;
    color: #0f172a;
}

.product-miniature-default .product-flag.on-sale,
.product-miniature-default .product-flag.discount {
    background: #dc2626;
    color: #fff;
}

.product-miniature-default .product-flag.new {
    background: #0f172a;
    color: #fff;
}

.product-miniature-default .product-flag.in-stock {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* --- Description Section --- */
.product-miniature-default .product-description {
    padding: 4px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Brand + Reference Row --- */
.product-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.72rem;
}

.product-brand-label {
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #0f172a;
}

.product-meta-sep {
    color: #cbd5e1;
    margin-left: auto;
}

.product-reference {
    font-weight: 500;
    color: #94a3b8;
}

/* --- Product Title --- */
.product-miniature-default .product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 14px;
    line-height: 1.35;
    flex-grow: 1;
}

.product-miniature-default .product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.product-miniature-default:hover .product-title a {
    color: #b91c1c;
}

/* --- Price + Cart Row --- */
.product-price-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.product-price-and-shipping {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.product-miniature-default .product-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #dc2626;
}

.product-price-suffix {
    font-size: 0.8rem;
    font-weight: 700;
    color: #dc2626;
}

.regular-price {
    font-size: 0.78rem;
    text-decoration: line-through;
}

.product-price-public {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
}

/* --- Circular Add to Cart Button --- */
.product-add-to-cart-circle-wrapper .add-to-cart,
.product-add-to-cart-circle-wrapper [data-button-action="add-to-cart"] {
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    background: #0f172a !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0 !important;
}

.product-add-to-cart-circle-wrapper .add-to-cart:hover,
.product-add-to-cart-circle-wrapper [data-button-action="add-to-cart"]:hover {
    background: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.product-add-to-cart-circle-wrapper .add-to-cart span,
.product-add-to-cart-circle-wrapper [data-button-action="add-to-cart"] span {
    display: none;
}

.product-add-to-cart-circle-wrapper .add-to-cart::before,
.product-add-to-cart-circle-wrapper [data-button-action="add-to-cart"]::before {
    font-family: 'FontAwesome';
    content: '\f07a';
}

/* =============================================
   PRODUCT PAGE GALLERY LAYOUT
   ============================================= */

/* Outer flex container: main image on top, thumbs row below */
.custom-gallery-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    align-items: flex-start;
}

/* Thumbnails row, below the main image */
.custom-thumbs-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual thumbnail */
.custom-thumbs-col .custom-thumb-btn {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 2px solid #f1f5f9;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.custom-thumbs-col .custom-thumb-btn.selected,
.custom-thumbs-col .custom-thumb-btn:hover {
    border-color: #dc2626;
}

.custom-thumbs-col .custom-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main image area fills remaining space */
.custom-gallery-bg {
    flex: 1;
    border-radius: 20px;
    background: #f4f6f8;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem !important;
}

/* =============================================
   LOGIN PAGE — right column pointing to registration
   ============================================= */
.codi-auth-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.codi-auth-register-card {
    background: #111113;
    color: #fff;
    padding: 2.25rem;
    position: sticky;
    top: 24px;
}

.codi-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #dc2626;
    margin-bottom: 14px;
}

.codi-auth-eyebrow-bar {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: #dc2626;
}

.codi-auth-register-title {
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

.codi-auth-register-text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.codi-auth-register-btn,
.codi-auth-register-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #dc2626;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.9rem 1.4rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.codi-auth-register-btn i {
    color: #fff !important;
}

.codi-auth-register-btn:hover,
.codi-auth-register-btn:hover i {
    background: #b91c1c;
    color: #fff !important;
}

@media (max-width: 900px) {
    .codi-auth-grid {
        grid-template-columns: 1fr;
    }
    .codi-auth-register-card {
        position: static;
    }
}

.custom-gallery-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =============================================
   MEGA MENU DROPDOWN (#cbp-hrmenu .cbp-hrsub)
   3 colonnes séparées par un filet, titre de
   section = trait rouge + libellé en gras, liste
   à plat sans puce (même logique que .codi-cat-eyebrow)
   ============================================= */

/* Panneau : fond blanc, filet rouge en haut au lieu du liseré gris */
.cbp-hrmenu .cbp-hrsub-inner {
    border: none !important;
    border-top: 3px solid #e50019 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    padding: 32px 40px 36px;
}

/* Répartition des 3 colonnes de premier niveau + séparateur vertical
   (ne cible que la ligne "first_rows", pas les sous-lignes imbriquées) */
.cbp-hrsub-inner .menu_row.first_rows {
    margin: 0 -22px;
}
.cbp-hrsub-inner .menu_row.first_rows > .cbp-menu-column {
    padding: 0 22px;
    margin-top: 0 !important;
}
.cbp-hrsub-inner .menu_row.first_rows > .cbp-menu-column:not(:last-child) {
    border-right: 1px solid #eef2f6;
}

/* Titre de section : trait rouge + libellé gras foncé */
.cbp-hrmenu .cbp-hrsub-inner .cbp-column-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a !important;
    text-decoration: none !important;
    margin-bottom: 14px;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-column-title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 3px;
    background: #e50019;
    flex-shrink: 0;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-column-title:hover {
    color: #e50019 !important;
}

/* Liste à plat sous le titre : pas de puce/flèche, interlignage aéré */
.cbp-hrmenu .cbp-hrsub-inner .cbp-links.cbp-category-tree {
    display: block;
    width: 100%;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-links li {
    margin: 0 0 6px;
    padding-left: 0;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-links li:last-child {
    margin-bottom: 0;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-links li a {
    padding-left: 0;
    display: block;
    color: #475569;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-links li a::before {
    content: none !important;
}
.cbp-hrmenu .cbp-hrsub-inner .cbp-links li a:hover {
    color: #e50019;
}

/* Sous-niveau (flyout .cbp-hrsub-level2) : même palette de texte */
/* ==========================================================================
   Bloc bas de page "top-footer-blocs" (piecesdetachees.tpl) repris dans le
   style "bandeau sombre" (fond noir, icône, titre gras blanc, texte gris,
   accent rouge). On restyle les classes existantes, aucun nouveau markup.
   ========================================================================== */
.top-footer-blocs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--cd-ink, #111113);
    padding: 40px 24px;
    gap: 24px;
}

.top-footer-blocs .category_optin {
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
}

/* Carte "bonnes affaires" : garde son image de fond (inline style) mais
   avec un voile sombre pour rester lisible dans le bandeau */
.top-footer-blocs .category_optin[style*="background-image"] {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    padding: 24px 16px;
}
.top-footer-blocs .category_optin[style*="background-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.top-footer-blocs .category_optin[style*="background-image"] > * {
    position: relative;
    z-index: 1;
}

.top-footer-blocs .category_optin_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.35;
    margin-bottom: 8px;
}

/* Petit accent rouge type "épingle" au-dessus de l'icône */
.top-footer-blocs .category_optin_title::before {
    content: "";
    order: -1;
    width: 7px;
    height: 7px;
    background-color: var(--cd-red, #E1141B);
    transform: rotate(45deg);
}

.top-footer-blocs .category_optin_title svg {
    width: 40px;
    height: 40px;
    /* les SVG du thème ont des couleurs figées (#282828...) : on les passe en blanc */
    filter: brightness(0) invert(1);
}

.top-footer-blocs .percent {
    color: var(--cd-red, #E1141B);
}

.top-footer-blocs .paragraph_small {
    color: #9a9a9f;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.top-footer-blocs .button_grey {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 10px 22px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 2px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.top-footer-blocs .button_grey:hover {
    background-color: var(--cd-red, #E1141B);
    border-color: var(--cd-red, #E1141B);
    color: #ffffff;
}

@media (max-width: 991px) {
    .top-footer-blocs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .top-footer-blocs {
        padding: 32px 16px;
        grid-template-columns: 1fr;
    }
}

.cbp-hrmenu .cbp-hrsub-inner ul.cbp-hrsub-level2 li a {
    color: #475569;
}

i.cbp-submenu-aindicator {display:none;} 

.cart-products-count-btn{background: #e1141b;}

/* SAV & ASSISTANCE */

.blocks{
    grid-auto-columns: 0.5fr 1fr 1fr;
    display: inline-flex;
    column-gap: 30px;
    text-align: center;
    margin-top: 30px;
}

.technique{
    width: 30%;
    padding: 20px;
    background: #eeecec;
}

.livraison{
    width: 30%;
    padding: 20px;
    background: #eeecec;
}

.commercial{
    width: 40%;
    padding: 20px;
    background: #eeecec;
}

div.blocks > div > p {
    margin-top : 15px;
}

div.blocks > div > a > button {
    margin-top: 10px;
    height: 25px;
    padding:  revert !important;
    font-size: 12px;
}

div.blocks > div.technique, div.livraison > p {
    line-height: 22px;
}

#ets_cft_page .page-content{
    width: 1200px;
    margin: 0 auto;
}

.form-control{
  background: #f7f7f7 !important;  
}

.ets_cfu_input label .ets_cfu_span{
    font-weight: 500 !important;
}

.group-span-filestyle .btn-default{
    background: #6a6f70;
}

@media only screen and (max-width: 600px){
    #ets_cft_page .page-content{
        width: 100%;
    }
    
    .blocks{
        display: grid;
        grid-auto-columns: 1fr;
        
    }
    
    div.blocks > div {
        width: 100%;
        margin: 10px 0;
    }
}

.refresh {
    background-image: linear-gradient(to right, #d60202 0%, #a10303 100%);
    text-transform: none;
    transition: all 0.3s;
    background-color: #ffffff;
    border: none;
    padding: 0.5rem 1.25rem;
    font-family: Noto Sans;
    font-weight : 600;
    color:#fff;
    cursor: pointer;
    border-radius: 10px;
    vertical-align: middle;
}

.block-refresh{
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
}

div.block-refresh > button > a {
    color : #fff;
    display: inline-block;
}
.page-cms .cms-assistance .cms-content .item {
    padding: 20px 30px;
    box-shadow: 2px 3px 15px 0px #4356641A;
    margin-top: 30px;
}

/* =============================================
   FORMULAIRES DE CONTACT (module ets_cfultimate)
   Look flat aligné sur la charte du site : accent
   rouge (#dc2626), titres foncés (#0f172a),
   bordures fines type tableaux doc / facettes.
   ============================================= */
.ets-cfu-form {
    max-width: 900px;
    margin: 0 auto;
}

.ets_cfu_wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Rangée : gère les variantes 1/2/3 colonnes du module */
.ets_cfu_box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.ets_cfu_box .ets_cfu_col {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Bloc "html" utilisé comme titre de section (Vos coordonnées, Votre société…) */
.ets_cfu_box.style1 {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #ececee;
}

.ets_cfu_box.style1:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.ets_cfu_input_html .ets_cfu_form-control.ets_cfu-html {
    display: block;
}

.ets_cfu_input_html h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    margin: 0;
}

.ets_cfu_input_html h3::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 3px;
    background: #dc2626;
    flex-shrink: 0;
}

/* Label + champ */
.ets_cfu_input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ets_cfu_input label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.ets_cfu_input .ets_cfu_span {
    font-weight: 600 !important;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ets_cfu_input_html .ets_cfu_span {
    display: none;
}

.ets_cfu_form-control-wrap {
    display: block;
    width: 100%;
}

/* Champs texte / email / tel / select */
.ets_cfu_form-control-wrap input.ets_cfu_form-control,
.ets_cfu_form-control-wrap select.ets_cfu_form-control,
.ets_cfu_form-control-wrap textarea.ets_cfu_form-control {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #f7f7f7 !important;
    border: 1px solid #e4e4e6;
    border-radius: 0;
    color: #111113;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ets_cfu_form-control-wrap textarea.ets_cfu_form-control {
    height: auto;
    min-height: 140px;
    padding: 14px 16px;
    resize: vertical;
}

.ets_cfu_form-control-wrap select.ets_cfu_form-control[multiple] {
    height: auto;
    min-height: 160px;
    padding: 10px 16px;
}

.ets_cfu_form-control-wrap input.ets_cfu_form-control:focus,
.ets_cfu_form-control-wrap select.ets_cfu_form-control:focus,
.ets_cfu_form-control-wrap textarea.ets_cfu_form-control:focus {
    outline: none;
    border-color: #dc2626;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.ets_cfu_form-control-wrap input.ets_cfu_form-control::placeholder,
.ets_cfu_form-control-wrap textarea.ets_cfu_form-control::placeholder {
    color: #9a9aa0;
}

/* Cases à cocher / radios (choix RGPD, options…) */
.ets_cfu_input_checkbox .ets_cfu_form-control-wrap,
.ets_cfu_input_radio .ets_cfu_form-control-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ets_cfu_input_checkbox label,
.ets_cfu_input_radio label {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
}

.ets_cfu_input_checkbox input[type="checkbox"],
.ets_cfu_input_radio input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.ets_cfu_input_radio input[type="radio"] {
    border-radius: 50%;
}

.ets_cfu_input_checkbox input[type="checkbox"]:checked,
.ets_cfu_input_radio input[type="radio"]:checked {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Bouton d'envoi de fichier (déjà géré par .group-span-filestyle .btn-default plus haut) */
.ets_cfu_input_file .ets_cfu_form-control-wrap {
    display: flex;
}

/* Messages d'erreur / aide */
.ets-cfu-form .ets_cfu_error_msg,
.ets-cfu-form .wpcfu-error-message,
.ets-cfu-form label.error {
    display: block;
    margin-top: 4px;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 600;
}

.ets-cfu-form .ets_cfu_form-control.error,
.ets-cfu-form input.error,
.ets-cfu-form select.error,
.ets-cfu-form textarea.error {
    border-color: #dc2626 !important;
    background: #fdeceb !important;
}

/* Bouton d'envoi */
.ets-cfu-form button[type="submit"],
.ets-cfu-form input[type="submit"],
.ets-cfu-form .ets_cfu_submit_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #dc2626;
    color: #ffffff !important;
    border: none;
    border-radius: 0;
    padding: 0.9rem 2.2rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ets-cfu-form button[type="submit"]:hover,
.ets-cfu-form input[type="submit"]:hover,
.ets-cfu-form .ets_cfu_submit_button:hover {
    background: #b91c1c;
}

@media (max-width: 700px) {
    .ets_cfu_box {
        flex-direction: column;
        gap: 18px;
    }
}

.codi-cat-banner-image img {display:none }

.custom-search-container input[type="text"], .custom-search-container input[type="search"] {
    align-items: center;
    background-color: #fff;
    padding: 0;
    overflow: visible;
    border: 1.5px solid #d0d5dd;
    transition: border-color 0.2s;
}

/* Bootstrap's .input-group rule (border-top-right-radius/border-bottom-right-radius: 0
   on every child but the last) has higher specificity (0,5,0) and flattens the right
   side of the input. !important on all 4 corners forces the full pill shape back. */
.custom-search-container input[type="text"],
.custom-search-container input[type="search"] {
    border-radius: 50px !important;
}
#search_widget > form > div.autocomplete-suggestions > div > div > div.col.col-auto.col-shop.pt-3.pb-3 {display:none;}

/* Fiche produit mobile : le bouton "Ajouter au devis" (largeur fixe, non
   compressible) et le formulaire panier (quantité + "Ajouter au panier")
   se partagent une seule ligne flex en desktop. Sur petit écran, le
   formulaire se compresse trop et son texte déborde sur le bouton devis
   voisin. On les empile plutôt sur deux lignes. */
.product-buy-row {
    flex-wrap: wrap;
}
@media (max-width: 575px) {
    .product-buy-form {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    .product-devis-btn {
        flex: 1 1 100% !important;
        margin-top: 0.75rem;
    }
}
@media (max-width: 575px) {
.bento-title {
    font-size: 1.5rem!important;
}
.bento-item {
    padding: 12px!important;
}}