/**
 * Espace de commande Start Distrib
 *
 * Chaque gamme tient sur une carte : le produit en tête, ses déclinaisons
 * juste dessous en cases compactes. Rien à déplier — un commercial au
 * téléphone doit voir les tailles disponibles d'un seul regard.
 *
 * La couleur est réservée aux signaux commerciaux : promotion, nouveauté,
 * alerte de stock. Tout le reste vit en gris.
 */

.sdc {
	--sdc-encre:        #13151a;
	--sdc-encre-douce:  #5f6774;
	--sdc-encre-tenue:  #98a0ac;
	--sdc-trait:        #e6e9ed;
	--sdc-trait-fort:   #d2d7de;
	--sdc-fond:         #ffffff;
	--sdc-fond-doux:    #f7f8fa;
	--sdc-fond-app:     #f2f4f7;

	--sdc-promo:        #b32d1a;
	--sdc-promo-fond:   #fdf0ed;
	--sdc-nouveau:      #0e6b60;
	--sdc-nouveau-fond: #e7f4f1;
	--sdc-alerte:       #a05c07;
	--sdc-alerte-fond:  #fdf4e7;
	--sdc-actif:        #1d4ed8;
	--sdc-actif-fond:   #eef2ff;

	--sdc-rayon:    12px;
	--sdc-rayon-sm: 8px;
	--sdc-ombre:    0 1px 2px rgb(19 21 26 / .05);
	--sdc-ombre-md: 0 4px 16px rgb(19 21 26 / .09);

	color: var(--sdc-encre);
	font-size: 14px;
	line-height: 1.5;
	max-width: 1520px;
	margin-inline: auto;
	padding: 0 20px 108px;
	-webkit-font-smoothing: antialiased;
}

.sdc *, .sdc *::before, .sdc *::after { box-sizing: border-box; }
.sdc [hidden] { display: none !important; }

/* ------------------------------------------ Neutralisation du thème */

.sdc button,
.sdc input[type="number"],
.sdc input[type="search"] {
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	background-image: none !important;
}

.sdc .sdc-moins,
.sdc .sdc-plus {
	background: transparent !important;
	color: var(--sdc-encre-tenue) !important;
	border: 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	border-radius: 0 !important;
}

.sdc .sdc-moins:hover,
.sdc .sdc-plus:hover { background: var(--sdc-fond-doux) !important; color: var(--sdc-encre) !important; }

.sdc .sdc-qte {
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.sdc .sdc-puce {
	background: var(--sdc-fond) !important;
	color: var(--sdc-encre-douce) !important;
	border: 1px solid var(--sdc-trait) !important;
	padding: 8px 15px !important;
	border-radius: 999px !important;
}

.sdc .sdc-puce[aria-pressed="true"] {
	background: var(--sdc-encre) !important;
	border-color: var(--sdc-encre) !important;
	color: #fff !important;
}

.sdc .sdc-puce-promo[aria-pressed="true"]   { background: var(--sdc-promo) !important;   border-color: var(--sdc-promo) !important; }
.sdc .sdc-puce-nouveau[aria-pressed="true"] { background: var(--sdc-nouveau) !important; border-color: var(--sdc-nouveau) !important; }

.sdc .sdc-categorie-lien {
	background: transparent !important;
	border: 0 !important;
	color: var(--sdc-encre-douce) !important;
	padding: 7px 10px !important;
	border-radius: var(--sdc-rayon-sm) !important;
}

.sdc .sdc-categorie-lien:hover { background: var(--sdc-fond) !important; color: var(--sdc-encre) !important; }

.sdc .sdc-categorie-active {
	background: var(--sdc-encre) !important;
	color: #fff !important;
}

.sdc .sdc-bouton {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgb(255 255 255 / .3) !important;
	padding: 11px 20px !important;
	border-radius: var(--sdc-rayon-sm) !important;
}

.sdc .sdc-bouton:hover { background: rgb(255 255 255 / .12) !important; }

.sdc .sdc-bouton-primaire {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--sdc-encre) !important;
}

.sdc .sdc-bouton-primaire:hover { background: #e7eaf0 !important; }

.sdc .sdc-bouton-succes {
	background: #16a34a !important;
	border-color: #16a34a !important;
	color: #fff !important;
}

/* ---------------------------------------------------------- En-tête */

.sdc-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sdc-trait);
	margin-bottom: 14px;
}

.sdc-titre {
	margin: 0 0 4px;
	font-size: clamp(21px, 3vw, 28px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sdc-groupe {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sdc-encre-douce);
	font-size: 14px;
}

.sdc-groupe strong { color: var(--sdc-encre); }

.sdc-pastille {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 3px rgb(22 163 74 / .16);
}

.sdc-stats { display: flex; gap: 26px; margin: 0; }
.sdc-stats div { text-align: right; }

.sdc-stats dt {
	margin: 0 0 1px;
	font-size: 10px;
	font-weight: 620;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sdc-encre-tenue);
}

.sdc-stats dd {
	margin: 0;
	font-size: 21px;
	font-weight: 670;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.sdc-stat-promo dd   { color: var(--sdc-promo); }
.sdc-stat-nouveau dd { color: var(--sdc-nouveau); }

/* --------------------------------------- Conditions commerciales */

.sdc-conditions {
	margin-bottom: 12px;
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon);
	background: var(--sdc-fond);
	overflow: hidden;
}

.sdc-conditions[open] { box-shadow: var(--sdc-ombre-md); }

.sdc-conditions-resume {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 15px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sdc-conditions-resume::-webkit-details-marker { display: none; }
.sdc-conditions-resume:hover { background: var(--sdc-fond-doux); }

.sdc-conditions-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	flex: 0 0 28px;
	border-radius: 8px;
	background: var(--sdc-nouveau-fond);
	color: var(--sdc-nouveau);
}

.sdc-conditions-texte { flex: 1; font-size: 13px; color: var(--sdc-encre-douce); }
.sdc-conditions-texte strong { color: var(--sdc-encre); }
.sdc-conditions-texte strong:first-child { margin-right: 6px; }

.sdc-conditions-fleche { color: var(--sdc-encre-tenue); transition: transform .18s ease; display: flex; }
.sdc-conditions[open] .sdc-conditions-fleche { transform: rotate(180deg); }

.sdc-conditions-liste {
	margin: 0; padding: 0;
	list-style: none;
	border-top: 1px solid var(--sdc-trait);
	max-height: 320px;
	overflow-y: auto;
}

.sdc-condition {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 8px 15px;
}

.sdc-condition + .sdc-condition { border-top: 1px solid var(--sdc-fond-doux); }

.sdc-condition-taux {
	font-size: 15px;
	font-weight: 690;
	color: var(--sdc-promo);
	font-variant-numeric: tabular-nums;
}

.sdc-condition-detail { min-width: 0; }

.sdc-condition-nom {
	display: block;
	font-weight: 550;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sdc-condition-portee {
	display: block;
	font-size: 11.5px;
	color: var(--sdc-encre-tenue);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sdc-condition-mode {
	font-size: 10px;
	font-weight: 620;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sdc-encre-tenue);
	white-space: nowrap;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--sdc-fond-doux);
}

.sdc-mode-prix { background: var(--sdc-nouveau-fond); color: var(--sdc-nouveau); }

.sdc-conditions-note {
	margin: 0;
	padding: 10px 15px;
	border-top: 1px solid var(--sdc-trait);
	background: var(--sdc-fond-doux);
	font-size: 12px;
	color: var(--sdc-encre-douce);
}

/* ----------------------------------------------------- Barre outils */

.sdc-outils {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	margin-bottom: 14px;
}

.sdc-recherche { position: relative; flex: 1 1 300px; display: flex; align-items: center; }

.sdc-recherche svg {
	position: absolute;
	left: 14px;
	color: var(--sdc-encre-tenue);
	pointer-events: none;
	z-index: 1;
}

/* Le retrait à gauche doit résister au thème, sinon le texte saisi passe
   sous la loupe. D'où le !important, limité à cette propriété. */
.sdc-recherche input {
	width: 100%;
	padding: 11px 14px 11px 42px !important;
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon-sm);
	font-size: 14px;
	background: var(--sdc-fond);
	color: inherit;
	transition: border-color .12s, box-shadow .12s;
}

.sdc-recherche input:focus {
	border-color: var(--sdc-encre);
	box-shadow: 0 0 0 3px rgb(19 21 26 / .07);
	outline: none;
}

.sdc-filtres { display: flex; gap: 6px; }
.sdc-puce { font-size: 12.5px; font-weight: 540; cursor: pointer; transition: all .12s; }

.sdc-recherche input:focus-visible,
.sdc-puce:focus-visible,
.sdc-qte:focus-visible,
.sdc-bouton:focus-visible,
.sdc-categorie-lien:focus-visible {
	outline: 2px solid var(--sdc-encre);
	outline-offset: 2px;
}

/* ------------------------------------------------ Corps : 2 colonnes */

.sdc-corps {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/*
 * Sans cette déclaration, un élément de grille adopte « min-width: auto » :
 * il refuse de descendre sous la largeur de son contenu. La barre de
 * catégories, censée défiler horizontalement, étirait alors toute la page à
 * 1 803 px sur un écran de 375.
 */
.sdc-corps > * { min-width: 0; max-width: 100%; }

.sdc-lateral { position: sticky; top: 16px; }

.sdc-lateral-contenu {
	background: var(--sdc-fond-app);
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon);
	padding: 10px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

.sdc-lateral-titre {
	margin: 2px 0 8px;
	padding-inline: 10px;
	font-size: 10px;
	font-weight: 680;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--sdc-encre-tenue);
}

.sdc-categorie-lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	font-size: 13px;
	font-weight: 520;
	text-align: left;
	cursor: pointer;
	transition: background .12s, color .12s;
}

/* Vos catégories sont saisies tantôt en majuscules, tantôt en minuscules
   (« CHAUSSURES » face à « Chaussures Pickleball »). La casse est normalisée
   à l'affichage : corriger les données elles-mêmes toucherait au référencement. */
.sdc-categorie-lien span:first-child {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12px;
	font-weight: 620;
}

.sdc-categorie-nb {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--sdc-encre-tenue);
	background: var(--sdc-fond);
	border-radius: 999px;
	padding: 1px 7px;
	flex: 0 0 auto;
}

.sdc-categorie-active .sdc-categorie-nb { background: rgb(255 255 255 / .2); color: #fff; }

/* ------------------------------------------------- Titre catégorie */

.sdc-categorie-titre {
	margin: 20px 0 8px;
	font-size: 11px;
	font-weight: 690;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sdc-encre-tenue);
	display: flex;
	align-items: center;
	gap: 12px;
	scroll-margin-top: 16px;
}

.sdc-categorie-titre::after { content: ""; flex: 1; height: 1px; background: var(--sdc-trait); }
.sdc-categorie-titre:first-child { margin-top: 0; }

/* ---------------------------------------------------------- Gamme */

.sdc-gamme {
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon);
	background: var(--sdc-fond);
	box-shadow: var(--sdc-ombre);
	margin-bottom: 8px;
	overflow: hidden;
	transition: border-color .14s, box-shadow .14s, transform .14s;
}

.sdc-gamme:hover { border-color: var(--sdc-trait-fort); box-shadow: var(--sdc-ombre-md); }

.sdc-gamme-active {
	border-color: var(--sdc-actif);
	box-shadow: 0 0 0 1px var(--sdc-actif), var(--sdc-ombre-md);
}

/* Un liseré suffit à signaler l'offre : colorer la carte entière
   saturerait l'écran dès qu'un quart du catalogue est en promotion. */
.sdc-gamme-promo   { border-left: 3px solid var(--sdc-promo); }
.sdc-gamme-nouveau { border-left: 3px solid var(--sdc-nouveau); }
.sdc-gamme-rupture { opacity: .58; }

.sdc-gamme-tete {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 13px;
	padding: 10px 14px;
}

.sdc-vignette {
	width: 52px; height: 52px;
	object-fit: contain;
	border: 1px solid var(--sdc-trait);
	border-radius: 8px;
	background: var(--sdc-fond-doux);
	transition: transform .16s ease;
}

.sdc-vignette-vide { display: block; }
.sdc-gamme:hover .sdc-vignette { transform: scale(1.05); }

.sdc-gamme-infos { min-width: 0; }

.sdc-gamme-nom {
	display: block;
	font-size: 14.5px;
	font-weight: 580;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--sdc-encre);
	text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sdc-gamme-nom:hover { text-decoration: underline; text-underline-offset: 2px; }

.sdc-badges { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }

.sdc-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 660;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sdc-badge-promo,
.sdc-badge-remise  { background: var(--sdc-promo-fond);   color: var(--sdc-promo); }
.sdc-badge-nouveau { background: var(--sdc-nouveau-fond); color: var(--sdc-nouveau); }

.sdc-badge-tarif {
	background: var(--sdc-fond-doux);
	color: var(--sdc-encre-douce);
	border: 1px solid var(--sdc-trait);
}

/* Remise différée : traitement distinct de la remise acquise sur la ligne.
   Le pointillé dit « ce n'est pas encore dans le prix du panier ». */
.sdc-badge-panier {
	background: #eef2ff;
	color: #3730a3;
	border: 1px dashed #a5b4fc;
}

.sdc-badge-mention {
	font-weight: 550;
	opacity: .8;
	text-transform: none;
	letter-spacing: 0;
}

.sdc-mention-panier {
	display: block;
	margin-top: 1px;
	font-size: 10px;
	font-style: italic;
	color: #4f46e5;
	white-space: nowrap;
}

.sdc-gamme-prix { text-align: right; line-height: 1.25; }

.sdc-prix-final {
	display: block;
	font-size: 16px;
	font-weight: 690;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sdc-gamme-promo .sdc-prix-final { color: var(--sdc-promo); }
.sdc-prix-a { font-size: 12px; font-weight: 400; color: var(--sdc-encre-tenue); }

/* Prix catalogue barré : discret, mais il matérialise l'économie mieux
   qu'un pourcentage seul. */
.sdc-prix-catalogue {
	margin-right: 7px;
	font-size: 12px;
	font-weight: 450;
	color: var(--sdc-encre-tenue);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.sdc-prix-catalogue .woocommerce-Price-amount { font-size: inherit; }

/* Le prix public : discret, mais toujours lisible. */
.sdc-marge {
	display: block;
	margin-top: 1px;
	font-size: 10px;
	color: var(--sdc-encre-tenue);
	white-space: nowrap;
}

.sdc-marge .woocommerce-Price-amount { font-size: inherit; }

.sdc-gamme-total {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--sdc-actif);
	color: #fff;
	font-size: 12.5px;
	font-weight: 660;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------- Les déclinaisons */

.sdc-declinaisons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 6px;
	padding: 10px 14px 12px;
	border-top: 1px dashed var(--sdc-trait);
	background: linear-gradient(180deg, var(--sdc-fond-doux) 0%, var(--sdc-fond) 100%);
}

.sdc-case {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 5px 6px;
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon-sm);
	background: var(--sdc-fond);
	transition: border-color .12s, box-shadow .12s, transform .12s;
}

.sdc-case:hover { border-color: var(--sdc-trait-fort); }

.sdc-case-active {
	border-color: var(--sdc-actif);
	box-shadow: 0 0 0 2px var(--sdc-actif-fond);
	transform: translateY(-1px);
}

.sdc-case-rupture,
.sdc-case-inactive { opacity: .48; background: var(--sdc-fond-doux); }

.sdc-case-plafonnee { animation: sdc-secousse .3s ease; border-color: var(--sdc-promo); }

@keyframes sdc-secousse {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

.sdc-case-libelle {
	font-size: 12px;
	font-weight: 640;
	line-height: 1.2;
	text-align: center;
	max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le SKU sert au quotidien : discret mais lisible, en chasse fixe pour que
   les chiffres s'alignent et se dictent sans erreur. */
.sdc-case-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9.5px;
	line-height: 1.2;
	color: var(--sdc-encre-tenue);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sdc-case-stock {
	font-size: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sdc-encre-tenue);
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--sdc-fond-doux);
}

/* ------------------------------------------------ Filtre « Ma liste d'achat » */

/*
 * Les gammes commandées restent à leur place dans le catalogue : les déplacer
 * ferait sauter le produit sous le curseur à chaque quantité saisie. Ce filtre
 * les rassemble à la demande, pour relire ou corriger la commande.
 */
.sdc .sdc-puce-liste {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--sdc-actif-fond) !important;
	border-color: #c7d2fe !important;
	color: var(--sdc-actif) !important;
	font-weight: 620 !important;
}

.sdc .sdc-puce-liste[aria-pressed="true"] {
	background: var(--sdc-actif) !important;
	border-color: var(--sdc-actif) !important;
	color: #fff !important;
}

.sdc-puce-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--sdc-actif);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sdc .sdc-puce-liste[aria-pressed="true"] .sdc-puce-compte {
	background: rgb(255 255 255 / .25);
}

.sdc-case-faible .sdc-case-stock  { background: var(--sdc-alerte-fond); color: var(--sdc-alerte); }
.sdc-case-rupture .sdc-case-stock { background: transparent; }

.sdc-case-indispo {
	font-size: 10px;
	font-weight: 600;
	color: var(--sdc-encre-tenue);
	padding: 6px 0 2px;
}

.sdc-compteur {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sdc-trait-fort);
	border-radius: 6px;
	overflow: hidden;
	background: var(--sdc-fond);
	margin-top: 1px;
}

.sdc-case-active .sdc-compteur { border-color: var(--sdc-actif); }

.sdc-moins, .sdc-plus { width: 22px; height: 26px; font-size: 14px; line-height: 1; cursor: pointer; }

.sdc-qte {
	width: 34px; height: 26px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	border-inline: 1px solid var(--sdc-trait) !important;
	-moz-appearance: textfield;
}

.sdc-qte::-webkit-outer-spin-button,
.sdc-qte::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------- Récapitulatif */

.sdc-recapitulatif {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 26px;
	background: rgb(19 21 26 / .97);
	backdrop-filter: blur(10px);
	color: #fff;
	box-shadow: 0 -6px 28px rgb(0 0 0 / .2);
	animation: sdc-remontee .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes sdc-remontee {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.sdc-recap-infos {
	display: flex; flex-wrap: wrap; gap: 22px;
	align-items: baseline;
	font-size: 13px;
	color: #b7bec9;
}

/* État de synchronisation : le client doit savoir, sans y penser, que sa
   saisie est bien enregistrée. */
.sdc-recap-etat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	white-space: nowrap;
}

.sdc-recap-point {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 3px rgb(22 163 74 / .2);
	transition: background .2s, box-shadow .2s;
}

.sdc-recap-etat[data-etat="attente"] .sdc-recap-point {
	background: #eab308;
	box-shadow: 0 0 0 3px rgb(234 179 8 / .2);
	animation: sdc-pulsation 1s ease-in-out infinite;
}

.sdc-recap-etat[data-etat="erreur"] .sdc-recap-point {
	background: #ef4444;
	box-shadow: 0 0 0 3px rgb(239 68 68 / .25);
}

@keyframes sdc-pulsation {
	50% { opacity: .35; }
}

.sdc-recap-infos strong { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; }
.sdc-recap-total strong { font-size: 22px; letter-spacing: -0.02em; }
.sdc-recap-total small  { color: #8a92a0; font-size: 11px; }

/* Décomposition sous-total / remise différée / total : elle reprend, dans
   l'ordre, ce que le client retrouvera dans son panier. */
.sdc-recap-ligne { font-size: 12.5px; white-space: nowrap; }
.sdc-recap-ligne strong { font-size: 14px; font-weight: 600; }

.sdc-recap-remise { color: #fca5a5; }
.sdc-recap-remise strong { color: #fca5a5; }

.sdc-recap-total {
	padding-left: 14px;
	border-left: 1px solid rgb(255 255 255 / .16);
}

.sdc-recap-actions { display: flex; gap: 10px; }

.sdc-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 560;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s;
}

.sdc-bouton[disabled] { opacity: .55; cursor: default; }
a.sdc-bouton:hover { text-decoration: none; }

/* ---------------------------------------------------------- Divers */

.sdc-aucun-resultat, .sdc-vide {
	padding: 54px 16px;
	text-align: center;
	color: var(--sdc-encre-douce);
}

.sdc-message {
	position: fixed;
	bottom: 88px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 70;
	max-width: min(680px, calc(100vw - 32px));
	padding: 12px 20px;
	border-radius: var(--sdc-rayon-sm);
	background: #16a34a;
	color: #fff;
	font-size: 13.5px;
	font-weight: 520;
	line-height: 1.45;
	box-shadow: 0 6px 22px rgb(0 0 0 / .22);
	animation: sdc-remontee .2s ease;
}

.sdc-message-erreur { background: var(--sdc-promo); }

.sdc-connexion {
	padding: 56px 24px;
	text-align: center;
	border: 1px solid var(--sdc-trait);
	border-radius: var(--sdc-rayon);
}

.sdc-connexion .sdc-bouton {
	border-color: var(--sdc-encre) !important;
	background: var(--sdc-encre) !important;
	color: #fff !important;
	margin-top: 12px;
	display: inline-block;
	text-decoration: none;
}

/* ------------------------------------------------------- Responsive */

/* ---------------------------------------- Tablette : colonne unique */

@media (max-width: 1100px) {
	.sdc-corps { grid-template-columns: 1fr; gap: 14px; }

	/* En colonne unique, les catégories deviennent une barre défilante
	   collée en haut : elles restent atteignables pendant le défilement. */
	.sdc-lateral {
		position: sticky;
		top: 0;
		z-index: 20;
		background: var(--sdc-fond);
		padding-block: 6px;
		margin-inline: -20px;
		padding-inline: 20px;
		/* Pas de 100vw ici : cette unité compte la barre de défilement et
		   provoquerait quelques pixels de débordement horizontal. */
		overflow: hidden;
	}

	.sdc-lateral-contenu {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		max-height: none;
		padding: 7px;
		scrollbar-width: none;
	}

	.sdc-lateral-contenu::-webkit-scrollbar { display: none; }
	.sdc-lateral-titre { display: none; }
	.sdc-categorie-lien { width: auto; white-space: nowrap; flex: 0 0 auto; }

	.sdc-stats { gap: 16px; }
	.sdc-stats dd { font-size: 18px; }
	.sdc-condition { grid-template-columns: 66px 1fr; }
	.sdc-condition-mode { display: none; }
}

/* ------------------------------------------------------- Mobile */

@media (max-width: 720px) {

	.sdc { padding: 0 14px 128px; font-size: 15px; }

	/* Les statistiques passent en grille : quatre colonnes serrées
	   deviennent illisibles sous 400 px. */
	.sdc-entete { gap: 12px; }
	.sdc-stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		width: 100%;
	}

	.sdc-stats div { text-align: left; }
	.sdc-stats dt { font-size: 9px; letter-spacing: 0.05em; }
	.sdc-stats dd { font-size: 17px; }

	.sdc-outils { gap: 7px; }
	.sdc-recherche { flex: 1 1 100%; }
	.sdc-filtres { width: 100%; }
	.sdc-puce { flex: 1; text-align: center; padding: 9px 8px !important; }

	.sdc-lateral { margin-inline: -14px; padding-inline: 14px; }

	/* Fiche produit : le visuel et le nom d'abord, le prix ensuite. */
	.sdc-gamme-tete {
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas:
			"image infos"
			"prix  prix"
			"total total";
		gap: 8px 11px;
		padding: 11px 12px;
	}

	.sdc-vignette    { grid-area: image; width: 48px; height: 48px; }
	.sdc-gamme-infos { grid-area: infos; }
	.sdc-gamme-nom   { white-space: normal; font-size: 14px; line-height: 1.3; }

	.sdc-gamme-prix  { grid-area: prix; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
	.sdc-prix-final  { font-size: 18px; }
	.sdc-marge       { margin-top: 0; }
	.sdc-gamme-total { grid-area: total; justify-self: stretch; text-align: center; }

	/*
	 * Deux colonnes, pas trois.
	 *
	 * Le compteur tactile réclame 110 px (34 + 42 + 34). À trois colonnes sur
	 * un écran de 375 px, chaque case n'en offre que 91 : les boutons
	 * tombaient à 19 px de large, impossibles à viser au doigt.
	 */
	.sdc-declinaisons {
		grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
		gap: 8px;
		padding: 10px 12px 12px;
	}

	.sdc-case { padding: 9px 6px 8px; gap: 5px; }
	.sdc-case-libelle { font-size: 13px; }
	.sdc-case-stock { font-size: 11px; }

	.sdc-compteur { width: 110px; }
	.sdc-moins, .sdc-plus { width: 34px; height: 38px; font-size: 18px; flex: 0 0 34px; }
	.sdc-qte { flex: 1 1 auto; width: auto; height: 38px; font-size: 15px; }

	/* Barre de total : informations puis actions, sur deux rangées. */
	.sdc-recapitulatif {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
	}

	.sdc-recap-infos {
		gap: 6px 16px;
		font-size: 12.5px;
		justify-content: space-between;
	}

	.sdc-recap-etat { order: -1; width: 100%; }
	.sdc-recap-total strong { font-size: 19px; }

	.sdc-recap-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
	.sdc-recap-actions .sdc-bouton { padding: 12px 14px !important; text-align: center; }

	.sdc-message { bottom: 132px; font-size: 13px; padding: 11px 16px; }

	.sdc-conditions-resume { padding: 11px 13px; gap: 9px; }
	.sdc-conditions-texte { font-size: 12.5px; }
	.sdc-condition { grid-template-columns: 60px 1fr; gap: 10px; padding: 9px 13px; }
	.sdc-condition-taux { font-size: 14px; }
}

/* Très petits écrans : une seule colonne de déclinaisons, pour préserver
   la largeur du compteur. */
@media (max-width: 400px) {
	.sdc-declinaisons { grid-template-columns: 1fr; }
	.sdc-stats { grid-template-columns: repeat(2, 1fr); }

	/* Les deux boutons tiennent côte à côte, même à 375 px : les empiler
	   volerait cent pixels de hauteur à un écran qui en manque déjà. */
	.sdc-recap-actions { grid-template-columns: 1fr 1fr; }
	.sdc-recap-actions .sdc-bouton { padding: 12px 8px !important; font-size: 13.5px; }

	/* En pleine largeur, la case se lit mieux à l'horizontale. */
	.sdc-case {
		flex-direction: row;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 10px;
	}

	.sdc-case-libelle { flex: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.sdc *, .sdc *::before, .sdc *::after {
		animation: none !important;
		transition: none !important;
	}
}