/*
	Theme custom by Ma Boutique Web
	Theme for yfcomputing.be
	Version : Design 2026 beta 1.3
*/

/* =============================================
   VARIABLES DE COULEURS
   ============================================= */
:root {
	--yfch-primary: #1a3a6b;
	--yfch-primary-light: #2a5298;
	--yfch-accent: #0077cc;
	--yfch-accent-hover: #005fa3;
	--yfch-red: #c0392b;
	--yfch-red-dark: #a93226;
	--yfch-gray-light: #e8eaed;
	--yfch-gray-mid: #b0b8c4;
	--yfch-gray-dark: #5a6575;
	--yfch-bg-card: #eef0f3;
	--yfch-text: #1e2530;
	--yfch-shadow: rgba(26, 58, 107, 0.15);
}

/* =============================================
   FULL-WIDTH — suppression des marges container
   ============================================= */
body > .container,
#wrapper > .container,
#header > .container,
.header-top .container,
.header-nav .container,
.footer-container .container,
#footer .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* =============================================
   HEADER — Anthracite moderne
   ============================================= */
#header {
	background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%);
	color: #fff;
	box-shadow: 0 3px 12px rgba(0,0,0,0.45);
	width: 100%;
}

#header .header-nav,
#header .header-top {
	background: transparent;
	border: 0rem;
}

#header .header-top a[data-depth="0"] {
	color: #e0e0e0;
	font-weight: 500;
	transition: color 0.2s ease;
}

#header .top-menu a[data-depth="0"]:hover {
	color: #7eb8f7;
}

#header a {
	color: #e0e0e0;
}

#header a:hover {
	color: #7eb8f7;
}

#header .dropdown:hover .expand-more {
	color: #7eb8f7;
}

#header .header-nav .blockcart {
	border-radius: .625rem;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	transition: background 0.2s;
}

#header .header-nav .blockcart:hover {
	background: rgba(255,255,255,0.15);
}

/* Dropdown menu même couleur que le header */
#header .dropdown-menu,
#header .top-menu .sub-menu,
#header .top-menu .popover,
#header .user-info .dropdown-menu,
#header .language-selector .dropdown-menu,
#header .currency-selector .dropdown-menu {
	background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
	color: #e0e0e0 !important;
}

#header .dropdown-menu a,
#header .top-menu .sub-menu a,
#header .top-menu .popover a,
#header .dropdown-menu .dropdown-item {
	color: #e0e0e0 !important;
}

#header .dropdown-menu a:hover,
#header .top-menu .sub-menu a:hover,
#header .top-menu .popover a:hover,
#header .dropdown-menu .dropdown-item:hover {
	background: rgba(255,255,255,0.06) !important;
	color: #7eb8f7 !important;
}

/* =============================================
   MENU DE NAVIGATION — cohérent avec header anthracite
   ============================================= */
.top-menu .sub-menu.collapse {
	border-radius: 0 0 0.5rem 0.5rem;
	background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%);
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.06);
}

#mobile_top_menu_wrapper {
	background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%);
}

#mobile_top_menu_wrapper .top-menu .sub-menu.collapse.in {
	background: transparent;
}

/* =============================================
   WRAPPER / FOND — dégradé bleu-gris tech
   ============================================= */
#wrapper {
	background-image:
		radial-gradient(ellipse at 15% 0%, rgba(0, 100, 200, 0.13) 0%, transparent 50%),
		radial-gradient(ellipse at 85% 100%, rgba(40, 70, 130, 0.10) 0%, transparent 50%),
		linear-gradient(155deg, #dce5f0 0%, #c5d2e4 40%, #bbc9dc 70%, #cfd9e9 100%);
	background-attachment: fixed;
	background-size: cover;
	box-shadow: inset 0rem 0.125rem 0.3125rem 0rem rgba(0, 0, 0, .11);
	padding-top: 1.563rem;
	padding-left: 5rem;
	padding-right: 5rem;
	min-height: 100vh;
}

#wrapper .breadcrumb li:last-child {
	color: var(--yfch-primary);
	background-color: #ffd60a;
	padding: 0.1rem 0.5rem 0.1rem 0.625rem;
	border-radius: 0.3125rem;
	font-weight: 600;
}

#wrapper .products-section-title {
	border-radius: 0.625rem;
	background: linear-gradient(135deg, #dde3ed 0%, #c8d0de 100%);
	padding: 0.9375rem;
	color: var(--yfch-primary);
	font-weight: 700;
	letter-spacing: 0.03em;
	border-left: 4px solid var(--yfch-primary-light);
}

#wrapper .contact-rich a {
	color: var(--yfch-accent);
	text-decoration: none;
	font-weight: 500;
}

#wrapper .contact-rich a:hover {
	color: var(--yfch-accent-hover);
	text-decoration: underline;
}

@media only screen and (max-width: 1440px) {
	#wrapper {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* =============================================
   CARTES / ÉLÉMENTS DE BASE
   ============================================= */
.card {
	background-color: var(--yfch-bg-card);
	border-radius: 0.75rem;
	border: 1px solid rgba(26,58,107,0.1);
	box-shadow: 0 2px 8px var(--yfch-shadow);
	transition: box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: 0 4px 16px rgba(26,58,107,0.2);
}

.block-categories {
	border-radius: 0.75rem;
	background-color: var(--yfch-bg-card);
	border: 1px solid rgba(26,58,107,0.1);
	box-shadow: 0 2px 6px var(--yfch-shadow);
}

.contact-form {
	background: var(--yfch-bg-card);
	border-radius: 0.75rem;
}

.page-content.page-cms {
	background: var(--yfch-bg-card);
	border-radius: 0.75rem;
	border: 1px solid rgba(26,58,107,0.08);
}

#custom-text {
	border-radius: 0.75rem;
	background: var(--yfch-bg-card);
	border: 1px solid rgba(26,58,107,0.08);
}

/* =============================================
   PRODUITS - MINIATURES
   ============================================= */
.product-miniature .thumbnail-container {
	border-radius: 0.75rem;
	transition: box-shadow 0.25s ease, transform 0.2s ease;
	border: 1px solid rgba(26,58,107,0.08);
}

.product-miniature .thumbnail-container:hover {
	box-shadow: 0 6px 20px rgba(26,58,107,0.2);
	transform: translateY(-2px);
}

/* =============================================
   PRIX ET PROMOTIONS
   ============================================= */
.product-price {
	color: var(--yfch-primary);
	font-size: 2.6669rem;
	font-weight: 700;
}

.product-discount .regular-price {
	color: var(--yfch-gray-dark);
	font-size: 1.1rem;
	background-color: rgba(255,255,255,0.8);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border-radius: 0.5rem;
	text-decoration: line-through;
}

.has-discount .product-price {
	color: var(--yfch-red);
}

.has-discount .discount {
	background-color: var(--yfch-red);
	border-radius: 0.5rem;
}

.product-flags li.product-flag.discount {
	background-color: var(--yfch-red);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.product-prices .tax-shipping-delivery-label {
	color: var(--yfch-gray-dark);
	font-weight: 600;
	font-size: 0.875rem;
}

.product-line-grid .product-price,
.product-line-grid .current-price {
	font-size: 1.25rem;
	color: var(--yfch-primary);
	font-weight: 700;
}

#cart-summary-product-list .product-price {
	color: var(--yfch-text);
	font-size: 1rem;
}

/* =============================================
   PAGE PRODUIT
   ============================================= */
#product .tabs {
	background: var(--yfch-bg-card);
	border-radius: 0.5rem 0.5rem 0 0;
}

#product_tabs_block {
	border-radius: 0.75rem;
	background: var(--yfch-bg-card);
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	margin-top: 1rem;
	border: 1px solid rgba(26,58,107,0.08);
	box-shadow: 0 2px 8px var(--yfch-shadow);
}

.product-description {
	text-align: justify;
}

#product_tabs_block .product-description table {
	width: 100%;
	margin-bottom: 1rem;
}

#product_tabs_block .product-description tr {
	border: 0.125rem solid rgba(255,255,255,0.7);
}

#product_tabs_block #description td {
	padding: 0.5rem 1rem;
	width: 50%;
}

.product-cover img {
	border-radius: 0.75rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.images-container .product-images > li.thumb-container > .thumb {
	border-radius: 0.5rem;
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
	border-radius: 0.5rem;
	border-color: var(--yfch-accent);
	box-shadow: 0 0 0 2px rgba(0,119,204,0.3);
}

.product-description img {
	max-width: 100%;
	height: auto;
}

.product-accessories .products {
	margin-top: 1rem;
}

.product-information .product-description ul li {
	color: var(--yfch-text);
	list-style-position: outside;
}

.product-comment-list-item {
	border-radius: 0.625rem;
}

#product-details .product-manufacturer a {
	margin-bottom: 1rem;
	max-width: 50%;
	height: auto;
	display: block;
}

/* =============================================
   RECHERCHE
   ============================================= */
#search_widget form input {
	border-radius: 0.5rem;
	border: 1px solid rgba(26,58,107,0.2);
	transition: border-color 0.2s, box-shadow 0.2s;
}

#search_widget form input:focus {
	border-color: var(--yfch-accent);
	box-shadow: 0 0 0 3px rgba(0,119,204,0.15);
	outline: none;
}

.products-sort-order .select-title {
	border-radius: 0.5rem;
	border: 1px solid rgba(26,58,107,0.2);
}

/* =============================================
   CARROUSEL — version propre et stable
   ============================================= */
#wrapper .container,
#index #wrapper > .container,
#wrapper > .row > .col-12 {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#index #wrapper > .container > .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#index #wrapper > .container > .row > .col-xs-12:first-child {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Conteneur réel du slider */
#carousel,
#homeslider {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto 2rem auto !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Inner */
#carousel .carousel-inner,
#homeslider .carousel-inner {
	width: 100% !important;
	text-align: center !important;
	position: relative;
}

/* Slides */
#carousel .carousel-item,
#homeslider .carousel-item {
	width: 100% !important;
	text-align: center !important;
	background: transparent !important;
	position: relative !important;
}

/* Lien du slide limité à l'image */
#carousel .carousel-item > a,
#homeslider .carousel-item > a {
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;
	text-align: center !important;
}

/* Image du slide : centrée, sans déformation */
#carousel .carousel-item > a > img,
#homeslider .carousel-item > a > img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	object-fit: contain !important;
	opacity: 1 !important;
}

.carousel .carousel-item img {
	border-radius: 0.625rem;
}

/* Caption */
#carousel .carousel-item .caption,
#homeslider .carousel-item .caption {
	position: absolute !important;
	left: calc(50% - 465px) !important;
	bottom: 1.75rem !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto !important;
	max-width: 25rem !important;
	background-color: rgba(28, 28, 28, 0.82) !important;
	border-radius: 0.75rem !important;
	padding: 0.75rem 1.25rem !important;
	backdrop-filter: blur(6px) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	color: #f0f0f0 !important;
	text-align: left !important;
	z-index: 5 !important;
}

#carousel .carousel-item .caption h2,
#carousel .carousel-item .caption .h2,
#carousel .carousel-item .caption p,
#carousel .carousel-item .caption span,
#homeslider .carousel-item .caption h2,
#homeslider .carousel-item .caption .h2,
#homeslider .carousel-item .caption p,
#homeslider .carousel-item .caption span {
	color: #f0f0f0 !important;
}

/* Flèches SUR l'image */
#carousel .carousel-control-prev,
#homeslider .carousel-control-prev,
.carousel .carousel-control-prev,
#carousel .left.carousel-control,
#homeslider .left.carousel-control {
	position: absolute !important;
	top: 50% !important;
	left: calc(50% - 33rem) !important;
	right: auto !important;
	transform: translateY(-50%) !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	opacity: 1 !important;
	z-index: 30 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#carousel .carousel-control-next,
#homeslider .carousel-control-next,
.carousel .carousel-control-next,
#carousel .right.carousel-control,
#homeslider .right.carousel-control {
	position: absolute !important;
	top: 50% !important;
	right: calc(50% - 33rem) !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	opacity: 1 !important;
	z-index: 30 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#carousel .carousel-control-prev-icon,
#carousel .carousel-control-next-icon,
#homeslider .carousel-control-prev-icon,
#homeslider .carousel-control-next-icon,
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
	width: 1.9rem !important;
	height: 1.9rem !important;
	background-size: 100% 100% !important;
}

/* =============================================
   CARROUSEL EN FONDU
   ============================================= */
#carousel .carousel-inner,
#homeslider .carousel-inner {
	position: relative;
}

#carousel .carousel-item,
#homeslider .carousel-item {
	display: block !important;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	opacity: 0 !important;
	transition: opacity 0.8s ease-in-out !important;
	transform: none !important;
	z-index: 1;
}

#carousel .carousel-item.active,
#homeslider .carousel-item.active {
	position: relative !important;
	opacity: 1 !important;
	z-index: 2;
}

#carousel .carousel-item-next,
#carousel .carousel-item-prev,
#homeslider .carousel-item-next,
#homeslider .carousel-item-prev {
	opacity: 1 !important;
	z-index: 1;
}

#carousel .active.carousel-item-start,
#carousel .active.carousel-item-end,
#carousel .carousel-item-next.carousel-item-start,
#carousel .carousel-item-prev.carousel-item-end,
#homeslider .active.carousel-item-start,
#homeslider .active.carousel-item-end,
#homeslider .carousel-item-next.carousel-item-start,
#homeslider .carousel-item-prev.carousel-item-end {
	transform: none !important;
}

/* =============================================
   SÉLECTEUR DE LANGUE — blanc cohérent avec header anthracite
   ============================================= */
#header .language-selector,
#header .language-selector-wrapper,
#header .l10n-dropdown,
.language-selector .expand-more,
.language-selector .dropdown-toggle,
.language-selector button,
.language-selector a,
#_desktop_language_selector .language-selector,
#_desktop_language_selector .expand-more,
#_desktop_language_selector a,
#_desktop_language_selector span,
#_desktop_language_selector .current-language,
.header-nav .language-selector span,
.header-nav .language-selector a {
	color: #e0e0e0 !important;
	border-radius: 0.4rem;
}

#header .language-selector:hover,
#_desktop_language_selector a:hover,
#_desktop_language_selector .expand-more:hover {
	color: #7eb8f7 !important;
}

/* =============================================
   LIEN "TOUS LES PRODUITS"
   ============================================= */
.all-product-link {
	background: linear-gradient(135deg, #dde3ed 0%, #c8d0de 100%);
	padding: 0.625rem 1rem;
	border-radius: 0.625rem;
	color: var(--yfch-primary) !important;
	font-weight: 600;
	border: 1px solid rgba(26,58,107,0.15);
	transition: background 0.2s, box-shadow 0.2s;
}

.all-product-link:hover {
	background: linear-gradient(135deg, #c8d0de 0%, #b5bfce 100%);
	box-shadow: 0 2px 8px var(--yfch-shadow);
	text-decoration: none;
}

/* =============================================
   FOOTER
   ============================================= */
#footer {
	background: linear-gradient(180deg, #d8dde6 0%, #c5cdd8 100%);
	padding-top: 2.5rem;
	border-top: 1px solid rgba(26,58,107,0.15);
}

#footer a {
	color: var(--yfch-text);
	transition: color 0.2s;
}

#footer a:hover {
	color: var(--yfch-accent);
}

#footer .block-contact {
	color: var(--yfch-text);
}

#footer .block-contact a {
	color: var(--yfch-accent);
	font-weight: 500;
}

#footer .block-contact a:hover {
	color: var(--yfch-accent-hover);
}

.copyright-yfch {
	background-image:
		radial-gradient(ellipse at 15% 50%, rgba(0, 100, 200, 0.10) 0%, transparent 60%),
		linear-gradient(135deg, #d8e2ef 0%, #c5d2e4 100%);
	background-attachment: fixed;
	color: var(--yfch-text);
	padding: 1rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
	border: 1px solid rgba(26,58,107,0.1);
	text-align: center;
}

#footer .copyright-yfch a {
	color: var(--yfch-accent);
}

/* =============================================
   PAGE 404 / ERREUR
   ============================================= */
#products .page-not-found,
#pagenotfound .page-not-found {
	border-radius: 0.75rem;
	background-color: transparent;
	color: var(--yfch-text);
}

#products .page-not-found,
#pagenotfound .page-not-found p {
	color: var(--yfch-text);
}

#pagenotfound h1 {
	background: linear-gradient(135deg, #dde3ed 0%, #c8d0de 100%);
	padding: 1rem 1.5rem;
	border-radius: 0.75rem;
	width: fit-content;
	color: var(--yfch-primary);
	border-left: 4px solid var(--yfch-primary-light);
}

/* =============================================
   PRIX DROP / PROMOTIONS
   ============================================= */
#prices-drop #wrapper .breadcrumb {
	border-radius: 0.5rem;
	width: fit-content;
	background: linear-gradient(135deg, #dde3ed 0%, #c8d0de 100%);
	padding: 0.5rem 0.75rem;
}

#prices-drop .block-categories {
	display: none;
}

#prices-drop #wrapper #main h1 {
	background: linear-gradient(135deg, #dde3ed 0%, #c8d0de 100%);
	padding: 0.625rem 1rem;
	border-radius: 0.75rem;
	width: fit-content;
	color: var(--yfch-primary);
}

/* =============================================
   RÉASSURANCE PRODUIT
   ============================================= */
.blockreassurance_product .item-product img {
	width: 3.125rem;
	height: 3.125rem;
}

.blockreassurance_product .item-product {
	display: flex;
	float: left;
	margin-right: 1rem;
	color: white;
	justify-content: center;
	align-items: center;
}

/* =============================================
   RÉSEAUX SOCIAUX
   ============================================= */
.block-social ul li {
	margin-right: 0.5rem;
}

.facebook {
	background-image: url(../css/04be689c12d686c595032705f6b3cf6c.svg) !important;
	background-color: #1877F2 !important;
	border-radius: 50%;
}

.instagram {
	background: url(../css/3a94078d659136527abfe39bc3432628.svg), linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
	border-radius: 0.75rem;
}

.social-sharing .twitter {
	background-color: #55ACEF;
	background-image: url(../css/f56d95737d55e2bdba95baa528b2583b.svg);
}

.social-sharing .pinterest {
	background-color: #E81B22;
	background-image: url(../css/33e7446832ac7aa84b959a6ea8efb915.svg);
}

/* =============================================
   VIDÉO
   ============================================= */
.video-container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: 0.75rem;
	overflow: hidden;
}

.video-container iframe,
.video-container video,
.video-container embed,
.video-container object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0.75rem;
}

.video-container-space {
	margin-top: 2rem;
}

/* =============================================
   SITEMAP
   ============================================= */
#sitemap #wrapper {
	background: #fff;
}

/* =============================================
   MASQUAGE CATÉGORIES
   ============================================= */
#main #subcategories {
	display: none;
}

#new-products .block-categories {
	display: none;
}

/* =============================================
   ANIMATION CLIGNOTEMENT
   ============================================= */
.yfcblink {
	animation-duration: 2s;
	animation-name: clignoter;
	animation-iteration-count: infinite;
	transition: none;
}

@keyframes clignoter {
	0%   { opacity: 1; }
	40%  { opacity: 0; }
	100% { opacity: 1; }
}

/* =============================================
   PAIEMENT QR
   ============================================= */
#paymentqr img {
	width: 80%;
}

#paymentqr td {
	text-align: center;
}

/* =============================================
   CHAMP MOT DE PASSE
   ============================================= */
.input-group .form-control:not(input[type="password"]) {
	display: none;
}

/* =============================================
   CLASSES UTILITAIRES YFCH
   ============================================= */
li.yfa-text-color {
	color: #232323;
}

.yfch-txt-bold {
	font-weight: bold;
}

.yfch-txt-black {
	color: var(--yfch-text);
}

.yfch-txt-red {
	color: #c0392b;
	font-weight: bold;
}

.yfch-txt-green {
	color: #1a7a3a;
	font-weight: bold;
}

.yfch-txt-blue {
	color: var(--yfch-accent);
	font-weight: bold;
}

.yfch-space-top {
	margin-top: 1rem;
}

.yfch-space-bottom {
	margin-bottom: 1rem;
}

.border-img img {
	border-radius: 0.3rem;
}

.yfch-img-center {
	text-align: center;
}

.yfch-txt-center {
	text-align: center;
}

/* =============================================
   CLASSES COULEURS ENCRE
   ============================================= */
.inkt-color-black {
	color: #1e2530;
	font-weight: bold;
}

.inkt-color-cyan {
	background-color: #00bcd4;
	color: #fff;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border-radius: 0.25rem;
	font-weight: bold;
}

.inkt-color-magenta {
	background-color: #d81b60;
	color: #fff;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border-radius: 0.25rem;
	font-weight: bold;
}

.inkt-color-yellow {
	background-color: #f9c700;
	color: #1e2530;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border-radius: 0.25rem;
	font-weight: bold;
}

/* =============================================
   CLASSES TITRES SPÉCIAUX
   ============================================= */
.yfch-titre-spec {
	background: linear-gradient(135deg, #4a6bce 0%, #627BE6 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.75rem;
	box-shadow: 0 3px 10px rgba(98,123,230,0.35);
}

.yfch-titre-pc {
	background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(0,188,212,0.35);
}

.yfch-titre-cpu {
	background: linear-gradient(135deg, #f09d3a 0%, #de821b 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(222,130,27,0.35);
}

.yfch-titre-printer {
	background: linear-gradient(135deg, #1a3a6b 0%, #0d2b5e 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(26,58,107,0.35);
}

.yfch-titre-ink {
	background: linear-gradient(135deg, #e0cf2a 0%, #c4b31a 100%);
	color: #1e2530;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(196,179,26,0.35);
}

.yfch-titre-usb {
	background: linear-gradient(135deg, #5be055 0%, #38c932 100%);
	color: #1e2530;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(56,201,50,0.35);
}

.yfch-titre-color1 {
	background: linear-gradient(135deg, #a97ee0 0%, #9758D9 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(151,88,217,0.35);
}

.yfch-titre-color2 {
	background: linear-gradient(135deg, #f46a8a 0%, #EF3F68 100%);
	color: #fff;
	font-weight: bold;
	border-radius: 0.625rem;
	margin-bottom: 1rem;
	padding: 0.9375rem 1.25rem;
	font-size: 1.375rem;
	box-shadow: 0 3px 10px rgba(239,63,104,0.35);
}

.yfch-txttd-right {
	text-align: right;
}

.yfch-table-noborder {
	border: none !important;
}

.yfch-spec-img-10 { width: 10%; }
.yfch-spec-img-20 { width: 20%; }
.yfch-spec-img-30 { width: 30%; }
.yfch-spec-img-40 { width: 40%; }
.yfch-spec-img-50 { width: 50%; }
.yfch-spec-img-60 { width: 60%; }
.yfch-spec-img-70 { width: 70%; }

#product_tabs_block .product-description .yfch-spec-img-10 { width: 10%; }
#product_tabs_block .product-description .yfch-spec-img-20 { width: 20%; }
#product_tabs_block .product-description .yfch-spec-img-30 { width: 30%; }
#product_tabs_block .product-description .yfch-spec-img-40 { width: 40%; }
#product_tabs_block .product-description .yfch-spec-img-50 { width: 50%; }
#product_tabs_block .product-description .yfch-spec-img-60 { width: 60%; }
#product_tabs_block .product-description .yfch-spec-img-70 { width: 70%; }

#product_tabs_block .product-description table img {
	width: 80%;
}

/* =============================================
   COOKIES
   ============================================= */
.yfch-txt-cookies {
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.yfch-txt-link-cookies a {
	color: #ff6b6b;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.yfccookietitle {
	color: var(--yfch-primary);
	font-size: 1.8331rem;
	line-height: 2.1669rem;
	text-align: center;
	font-weight: 700;
}

.yfccookiesubtitle {
	color: var(--yfch-primary-light);
	font-size: 1.5rem;
	line-height: 1.8331rem;
	font-weight: 600;
}

.yfctexte {
	color: var(--yfch-text);
	font-size: 1rem;
	line-height: 1.4rem;
}

li.cookie {
	list-style-image: url("../img/li_cookie.png");
	font-size: 1rem;
	line-height: 1.3331rem;
	word-wrap: break-word;
	color: var(--yfch-text);
}

.block-category .block-category-inner .text-muted .yfch-txt-blue {
	text-align: justify;
	margin-right: 1rem;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media only screen and (max-width: 767px) {
	#wrapper td {
		display: inline-block;
		padding: 0.625rem 0rem 0.625rem 0rem;
		width: 100%;
		text-align: center;
	}
	#wrapper table {
		width: 100%;
		padding: 0.625rem 0rem 0.625rem 0rem;
	}
	#product_tabs_block .product-description tr {
		border: 0.125rem solid rgba(0,0,0,0.1);
	}
	#product_tabs_block .product-description td {
		width: 100% !important;
	}
	.wishlist-button-product {
		margin-left: 0.3rem !important;
	}
	.block-social ul li {
		margin-right: 0.75rem;
		margin-bottom: 0.375rem;
	}
	.footer-container {
		padding-top: 0.5rem;
	}
	.copyright-yfch {
		margin-top: 1rem;
	}
	#product_tabs_block .product-description .yfch-spec-img-10,
	#product_tabs_block .product-description .yfch-spec-img-20,
	#product_tabs_block .product-description .yfch-spec-img-30,
	#product_tabs_block .product-description .yfch-spec-img-40,
	#product_tabs_block .product-description .yfch-spec-img-50,
	#product_tabs_block .product-description .yfch-spec-img-60,
	#product_tabs_block .product-description .yfch-spec-img-70 {
		width: 50%;
	}
	.products-sort-order .select-title {
		margin-top: 1rem;
	}
}

/* =============================================
   Modification Fabian
   ============================================= */

/* Responsive : garder le sous-menu aligné */
@media only screen and (max-width: 991px) {
	#mobile_top_menu_wrapper .top-menu .sub-menu,
	#mobile_top_menu_wrapper .top-menu .sub-menu.collapse,
	#mobile_top_menu_wrapper .top-menu .sub-menu.collapse.in {
		top: 40px !important;
	}
}

/* Champ recherche prioritaire sur le menu */
.top-menu .sub-menu {
	width: calc(100% - 30px);
	min-width:calc(100% - 30px);
	margin-left: 0.9375rem;
	transition: all 0.2s ease;
}

/* Navigation plus compacte */
#header .top-menu a[data-depth="0"],
#header .header-top a[data-depth="0"],
#header .dropdown-item,
#header .top-menu .sub-menu a {
	font-size: 0.8rem !important;
}

/* Produits en grid */
.products.row,
.product-accessories .products,
.featured-products .products,
.product-accessories .products.row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.products.row > [class*="col-"],
.product-accessories .products > [class*="col-"],
.featured-products .products > [class*="col-"],
.product-accessories .products.row > [class*="col-"] {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.product-miniature,
.product-accessories .product-miniature {
	width: 100% !important;
	margin: 0 !important;
}

/* Mobile / tablette : 2 produits par ligne, et dernier produit seul centré */
@media only screen and (max-width: 991px) {
	.products.row,
	.product-accessories .products,
	.featured-products .products,
	.new-products .products,
	.product-accessories .products.row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-items: stretch !important;
	}

	.products.row > [class*="col-"],
	.product-accessories .products > [class*="col-"],
	.featured-products .products > [class*="col-"],
	.new-products .products > [class*="col-"],
	.product-accessories .products.row > [class*="col-"],
	.products.row > article,
	.product-accessories .products > article,
	.featured-products .products > article,
	.new-products .products > article,
	.product-accessories .products.row > article {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}

	/* Si le dernier produit est seul, il se centre sans changer de taille */
	.products.row > [class*="col-"]:last-child:nth-child(odd),
	.product-accessories .products > [class*="col-"]:last-child:nth-child(odd),
	.featured-products .products > [class*="col-"]:last-child:nth-child(odd),
	.new-products .products > [class*="col-"]:last-child:nth-child(odd),
	.product-accessories .products.row > [class*="col-"]:last-child:nth-child(odd),
	.products.row > article:last-child:nth-child(odd),
	.product-accessories .products > article:last-child:nth-child(odd),
	.featured-products .products > article:last-child:nth-child(odd),
	.new-products .products > article:last-child:nth-child(odd),
	.product-accessories .products.row > article:last-child:nth-child(odd) {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-self: center !important;
	}

	.products.row > [class*="col-"]:last-child:nth-child(odd) .product-miniature,
	.product-accessories .products > [class*="col-"]:last-child:nth-child(odd) .product-miniature,
	.featured-products .products > [class*="col-"]:last-child:nth-child(odd) .product-miniature,
	.new-products .products > [class*="col-"]:last-child:nth-child(odd) .product-miniature,
	.product-accessories .products.row > [class*="col-"]:last-child:nth-child(odd) .product-miniature,
	.products.row > article:last-child:nth-child(odd) .product-miniature,
	.product-accessories .products > article:last-child:nth-child(odd) .product-miniature,
	.featured-products .products > article:last-child:nth-child(odd) .product-miniature,
	.new-products .products > article:last-child:nth-child(odd) .product-miniature,
	.product-accessories .products.row > article:last-child:nth-child(odd) .product-miniature {
		max-width: calc(50% - 0.625rem) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}