/* =============================================================================
   PANIER LATERAL CHAUSSETTE CHAUSSON
   Version 1.1.0 - 2026-09-10

   Porte depuis le panier de Maison Aurore, sur le tiroir natif de Salient.

   CE QUE SALIENT FAIT DEJA, ET QU'ON NE REFAIT PAS
   -----------------------------------------------------------------------------
   Son tiroir est deja bati comme il faut : `.widget_shopping_cart_content` est
   une colonne flex, `ul.woocommerce-mini-cart` porte deja `overflow-y: auto` et
   defile, le reste ne defile pas. Il n'y a donc AUCUNE zone de defilement a
   fabriquer, contrairement au tiroir de Woodmart. On se contente d'habiller.

   ⚠️ UNE SEULE ZONE DE DEFILEMENT, et ce doit etre celle sous le curseur.
   Le piege coute cher : un conteneur intermediaire qui porte `overflow-y: auto`
   sans rien avoir a defiler, avec `overscroll-behavior: none`, avale la molette
   des qu'un arrondi de hauteur le rend defilant de deux pixels. Ici la liste
   est directement sous le curseur : on n'ajoute pas d'autre conteneur.

   SPECIFICITE
   -----------------------------------------------------------------------------
   Toutes les regles sont prefixees `body .nectar-slide-in-cart` (0,2,1), au
   dessus des (0,2,0) et (0,1,1) de Salient, sans un seul !important.

   POLICES
   -----------------------------------------------------------------------------
   Poppins et Open Sans sont deja chargees par le theme : zero requete de plus.
   ========================================================================== */

body .nectar-slide-in-cart.nectar-modal {
	--cc-ink: #06446c;
	--cc-ink-soft: #5a7a91;
	--cc-accent: #1f70a6;
	--cc-line: #e4edf3;
	--cc-line-strong: #cfdfe9;
	--cc-tile: #f1f6fa;
	--cc-rail: #f4f8fb;
	--cc-page: #ffffff;
	--cc-titre: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cc-texte: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Largeur du tiroir. La translation de fermeture de Salient est en
	   pourcentage (translateX(107%)) : elle se recale toute seule, cette valeur
	   peut donc changer librement. */
	width: 480px;
	max-width: 100vw;

	/*
	 * ⚠️ HAUTEUR REELLEMENT VISIBLE SUR TELEPHONE.
	 * Salient etire le tiroir avec `top: 0; bottom: 0`, qui se resolvent sur le
	 * viewport de MISE EN PAGE. Sur iOS et Android, celui-ci passe sous la barre
	 * d'adresse : le bas du tiroir, donc le bouton de commande, se retrouve
	 * cache par le navigateur lui-meme. `100dvh` est la hauteur reellement
	 * visible. Elle rend `bottom` inoperant par la regle de sur-contrainte de
	 * CSS (avec top, bottom ET height, c'est bottom qui saute), ce qui est
	 * exactement ce qu'on veut. Sur ordinateur, dvh vaut vh : rien ne change.
	 */
	height: 100dvh;

	color: var(--cc-ink);
	font-family: var(--cc-texte);
}

/*
 * ⚠️ SALIENT DESCEND LE PANIER, ET CA NE SE VOIT QU'AU PIED.
 *
 * Son tiroir d'origine pose son en-tete en `position: absolute` ; pour ne pas
 * passer dessous, il descend tout le panier (`position: relative; top: 38px`,
 * et meme `top: 70px` quand la barre d'administration est la). Notre en-tete,
 * lui, est un element de la colonne flex : ce decalage n'a plus rien a eviter.
 *
 * Il ne laissait pas seulement un trou en haut : comme un decalage relatif ne
 * change pas la mise en page, il poussait TOUT LE PIED de 38 px sous le bas du
 * tiroir. Sur telephone, le bouton « Commander » passait sous le bord de
 * l'ecran, et la bande de reassurance disparaissait entierement.
 *
 * Salient se donne du poids en doublant le nom de classe
 * (`.nectar-slide-in-cart.nectar-slide-in-cart`) et en prefixant de
 * `body.admin-bar` : sa regle pese (0,4,1). On reprend le meme procede avec une
 * classe de plus, (0,5,1), plutot qu'un !important qu'on ne saurait plus
 * retirer.
 */
body .nectar-slide-in-cart.nectar-modal.nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart {
	position: static;
	top: auto;
	height: auto;
}

/* ---------- charpente --------------------------------------------------- */

body .nectar-slide-in-cart.nectar-modal .inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

body .nectar-slide-in-cart.nectar-modal .widget_shopping_cart {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

body .nectar-slide-in-cart.nectar-modal .widget_shopping_cart_content {
	/* Salient fixe ici une largeur en dur de 600 px, calee sur la largeur
	   d'origine du tiroir. Des qu'on change cette largeur, le contenu deborde
	   par la droite et les totaux sortent de l'ecran. */
	width: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: 0;
}

/* ---------- en-tete ------------------------------------------------------ */

body .nectar-slide-in-cart.nectar-modal .inner .header {
	position: static;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--cc-line);
}

body .nectar-slide-in-cart.nectar-modal .inner .header > span {
	font-family: var(--cc-titre);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--cc-ink);
}

body .nectar-slide-in-cart.nectar-modal .inner .header .cc-sc-count {
	margin-inline-start: 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cc-ink-soft);
}

body .nectar-slide-in-cart.nectar-modal .inner .header .cc-sc-count::before { content: "("; }
body .nectar-slide-in-cart.nectar-modal .inner .header .cc-sc-count::after  { content: ")"; }

body .nectar-slide-in-cart.nectar-modal .inner .header .close-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--cc-ink);
	background-color: var(--cc-tile);
	transition: background-color .15s ease;
}

body .nectar-slide-in-cart.nectar-modal .inner .header .close-cart:hover {
	background-color: var(--cc-line-strong);
}

/* ---------- bandeau livraison, hors de la zone qui defile ---------------- */

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 4px 10px;
	margin: 16px 24px 0;
	padding: 11px 14px;
	border-radius: 8px;
	background-color: var(--cc-tile);
	font-size: 13px;
	line-height: 1.35;
	color: var(--cc-ink);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar strong { font-weight: 600; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar__jauge {
	grid-column: 2;
	height: 4px;
	margin-top: 3px;
	border-radius: 2px;
	background-color: #ffffff;
	overflow: hidden;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar__jauge > span {
	display: block;
	height: 100%;
	border-radius: 2px;
	background-color: var(--cc-accent);
	transition: width .3s ease;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar--ok .cc-sc-shipbar__jauge { display: none; }

/* ---------- la liste : SEULE zone qui defile ----------------------------- */

body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0 24px;
	list-style: none;
}

body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart li.mini_cart_item {
	display: grid;
	grid-template-columns: 76px 1fr;
	align-items: start;
	gap: 0 14px;
	min-height: 0;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--cc-line);
	list-style: none;
}

body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart li.mini_cart_item:last-child {
	border-bottom: 0;
}

/*
 * STRUCTURE REELLE D'UNE LIGNE CHEZ SALIENT
 * (woocommerce/cart/mini-cart.php du theme, mode slide_in_click)
 *
 *   li.mini_cart_item
 *     a > img                          la vignette, seule dans son lien
 *     div.product-meta
 *       div.product-details
 *         a                            le titre
 *       span.quantity
 *         span.modify   > .quantity    le selecteur - N +
 *         span.product-price           le prix, puis le lien Supprimer
 *
 * Elle n'a rien a voir avec celle de Woodmart : deux enfants directs
 * seulement, et tout le reste imbrique dans .product-meta.
 */

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item > a:first-child {
	grid-column: 1;
	display: block;
	width: 76px;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item > a:first-child img {
	display: block;
	float: none;
	width: 76px;
	min-width: 0;
	max-width: 76px;
	height: 76px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
	background-color: var(--cc-tile);
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-meta {
	grid-column: 2;
	display: flex;
	flex-direction: column;

	/* ⚠️ Sans ce `stretch`, Salient laisse le titre se replier sur sa largeur
	   naturelle : 157 px au lieu des 276 disponibles, donc trois lignes la ou
	   deux suffisent, et 21 px de hauteur perdus par produit. */
	align-items: stretch;

	gap: 8px;
	min-width: 0;
	padding: 0;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-details {
	min-width: 0;
	padding: 0;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-details a {
	display: block;
	font-family: var(--cc-texte);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cc-ink);
	text-decoration: none;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-details a:hover {
	color: var(--cc-accent);
}

/* Le bloc quantite + prix + suppression, sur une seule ligne. */
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--cc-ink);
}

/*
 * ⚠️ LE VRAI COUPABLE DU « PANIER BEAUCOUP TROP HAUT » SUR TELEPHONE.
 *
 * Salient empile ce bloc des que la fenetre passe sous 690 px :
 *
 *   @media only screen and (max-width: 690px) {
 *     .style_slide_in_click .product-meta > .quantity {
 *         flex-direction: column-reverse; align-items: flex-end }
 *     .style_slide_in_click .product-meta > .quantity .modify { margin-top: 25px }
 *   }
 *
 * Le prix montait donc au-dessus du selecteur de quantite, avec 25 px de vide
 * entre les deux. Une ligne de produit faisait 197 px de haut au lieu de 100 :
 * deux articles suffisaient a repousser le bouton « Commander » hors de
 * l'ecran. Rien de tout cela ne se voyait sur ordinateur, ou la regle ne
 * s'applique pas.
 *
 * Le `>` vise le bloc exterieur seulement : `div.quantity`, le selecteur - N +,
 * porte la meme classe et doit garder sa mise en page.
 */
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-meta > .quantity {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-meta > .quantity > .modify {
	margin: 0;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .modify {
	display: flex;
	align-items: center;
}

/* Selecteur - N + : Salient fournit les boutons, on ne fait que l'habiller. */
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .modify .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--cc-line-strong);
	border-radius: 999px;
	overflow: hidden;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity input.qty {
	width: 34px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cc-ink);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity input.qty::-webkit-outer-spin-button,
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .plus,
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .minus {
	width: 28px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cc-ink-soft);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .plus:hover,
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .quantity .minus:hover {
	color: var(--cc-ink);
}

/* Prix de la ligne (total, pose par cc_sc_prix_ligne) + lien Supprimer. */
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-ink);
	white-space: nowrap;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-price a.remove {
	position: static;
	width: auto;
	height: auto;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: var(--cc-ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	opacity: 1;
}

body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-price a.remove:hover {
	color: #c0392b;
}

/* Le lien « Supprimer » que Salient place aussi en tete de .product-details
   ferait doublon avec celui du prix : un seul suffit. */
body .nectar-slide-in-cart.nectar-modal li.mini_cart_item .product-details > a.remove {
	display: none;
}

/* ---------- panier vide -------------------------------------------------- */

body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 48px 24px;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	color: var(--cc-ink-soft);
}

/* ---------- pied : totaux, bouton, reassurance --------------------------- */

body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__total {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px 24px 0;
	border-top: 1px solid var(--cc-line);
	font-size: 15px;
}

/* ⚠️ Salient impose `padding: 20px 0` a ce meme paragraphe par
   `.nectar-slide-in-cart .woocommerce.widget_shopping_cart .total`, qui pese
   (0,4,0) contre (0,3,1) a la regle ci-dessus : a nombre de classes superieur,
   il gagne, et les 24 px de marge laterale sautaient. Sur grand ecran, ou le
   tiroir touche le bord de l'ecran, « Gratuit ! » et le montant du total
   s'affichaient donc coupes par le bord de la fenetre.

   On reprend son propre selecteur, prefixe par `body`, pour repasser devant
   sans un seul !important. */
body .nectar-slide-in-cart.nectar-modal .woocommerce.widget_shopping_cart .total {
	padding: 16px 24px 0;
}

/* ⚠️ Salient fige la largeur de l'en-tete a 480 px, la largeur de SON tiroir.
   Tant que le notre fait la meme largeur, cela ne se voit pas ; des qu'on
   l'elargit, le titre et la croix de fermeture s'arretent avant le bord droit,
   desalignes avec la liste, les totaux et la bande de reassurance. La regle
   reste donc posee : elle rend cette largeur libre. */
body .nectar-slide-in-cart.nectar-modal.style_slide_in_click .inner > .header {
	width: auto;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-totaux {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	color: var(--cc-ink-soft);
	font-size: 14px;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-row--total {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--cc-line);
	font-family: var(--cc-titre);
	font-size: 19px;
	font-weight: 600;
	color: var(--cc-ink);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-livraison { color: var(--cc-accent); font-weight: 600; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-tva {
	display: block;
	margin-top: -2px;
	font-size: 12px;
	text-align: right;
	color: var(--cc-ink-soft);
}

body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
	display: block;
	margin: 0;
	padding: 12px 24px 0;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background-color: var(--cc-ink);
	color: #ffffff;
	font-family: var(--cc-titre);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-cta:hover {
	background-color: #05365a;
	color: #ffffff;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-trust {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;

	/* Resserre : les 16 px de marge et les 20 px de rembourrage bas mettaient
	   36 px de vide sous le bouton, pris sur la liste des produits. */
	margin: 4px 0 0;
	padding: 13px 20px 15px;

	border-top: 1px solid var(--cc-line);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
	font-size: 11px;
	line-height: 1.3;
	color: var(--cc-ink-soft);
}

/* ---------- pictogrammes, en masques : une seule couleur a piloter -------- */

body .nectar-slide-in-cart.nectar-modal {
	--cc-ico-truck: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
	--cc-ico-return: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
	--cc-ico-lock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
	--cc-ico-trash: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-ico {
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-ico--truck  { -webkit-mask-image: var(--cc-ico-truck);  mask-image: var(--cc-ico-truck); }
body .nectar-slide-in-cart.nectar-modal .cc-sc-ico--return { -webkit-mask-image: var(--cc-ico-return); mask-image: var(--cc-ico-return); }
body .nectar-slide-in-cart.nectar-modal .cc-sc-ico--lock   { -webkit-mask-image: var(--cc-ico-lock);   mask-image: var(--cc-ico-lock); }

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar .cc-sc-ico { width: 20px; height: 20px; color: var(--cc-accent); }
body .nectar-slide-in-cart.nectar-modal .cc-sc-trust__item .cc-sc-ico { width: 20px; height: 20px; }

/* =============================================================================
   CARROUSEL DE SUGGESTIONS
   -----------------------------------------------------------------------------
   Bande FIXE du tiroir, posee sous les produits reellement au panier et au
   dessus des totaux. Elle ne defile pas avec la liste : elle reste sous les
   yeux pendant qu'on parcourt son panier.

   COMMENT ELLE ARRIVE LA
   -----------------------------------------------------------------------------
   Le PHP l'imprime sur « woocommerce_widget_shopping_cart_before_buttons »,
   donc APRES le paragraphe des totaux dans le document. Le contenu du tiroir
   etant une colonne flex, `order` remet tout le monde dans l'ordre voulu. C'est
   la seule propriete utilisee pour ce deplacement, et il n'y a aucun script.

   ⚠️ Les valeurs partent de 0, pas de 1 : un enfant qu'on n'a pas prevu
   (message de panier vide, notice de Salient) garde `order: 0` et se range
   naturellement en tete au lieu de sauter devant le bandeau de livraison.

   CE QUE LE DEMENAGEMENT SUPPRIME
   -----------------------------------------------------------------------------
   L'ancien rail vivait DANS `ul.woocommerce-mini-cart` et il fallait annuler,
   une par une, quatre regles de Salient qui frappaient ses <li> et ses images :
   `position: relative` volait le bloc de reference, `float: left` reduisait le
   titre a zero pixel, `display: flex` empechait le rail de se reduire, et un
   `min-width` sur l'image battait tout `max-width`. Hors du <ul>, aucune ne
   s'applique : elles visent toutes `ul.product_list_widget li`.
   ========================================================================== */

body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar             { order: 0; }
body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart   { order: 1; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg                { order: 2; }
body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__total   { order: 3; }
body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__buttons { order: 4; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-trust               { order: 5; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 12px 0 13px;
	border-top: 1px solid var(--cc-line);
	background-color: var(--cc-rail);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__titre {
	margin: 0 0 8px;
	padding: 0 24px;
	font-family: var(--cc-titre);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cc-ink);
}

/*
 * La piste. Le rembourrage lateral est porte par ELLE, pas par la bande : sans
 * cela la premiere carte serait collee au bord au repos, ou la derniere ne
 * pourrait pas atteindre le bord droit en fin de course.
 *
 * `overscroll-behavior-x: contain` retient le geste dans la piste : arrive en
 * bout, il ne repart pas en navigation arriere ni en defilement de la page
 * derriere le tiroir.
 */
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__piste {
	display: flex;
	gap: 10px;
	min-width: 0;
	padding: 2px 24px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__piste::-webkit-scrollbar {
	display: none;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__item {
	flex: 0 0 138px;
	width: 138px;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__media {
	position: relative;
	line-height: 0;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__vignette { display: block; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__vignette img {
	display: block;
	float: none;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	margin: 0;

	/* 4/3 et non un carre : la vignette perd 35 px de haut par carte, soit une
	   quarantaine de pixels sur la bande entiere, rendus a la liste des
	   produits. Le sujet reste centre, `object-fit: cover` ne rognant que le
	   haut et le bas. */
	aspect-ratio: 4 / 3;

	border-radius: 10px;
	object-fit: cover;
	background-color: var(--cc-tile);
}

/*
 * Le bouton d'ajout, epingle dans l'angle de l'image : il ne coute aucune
 * hauteur, et le reste de la carte demeure un lien vers la fiche produit.
 *
 * Il ne porte volontairement PAS la classe `button` (voir le commentaire dans
 * cc_sc_carrousel_suggestions). C'est ce qui permet a cette regle de tenir en
 * (0,3,2), sans surenchere et sans les deux !important qu'il fallait avant
 * pour repondre au `background-color: #333 !important` de Salient.
 */
body .nectar-slide-in-cart.nectar-modal a.cc-sc-sugg__btn {
	position: absolute;
	inset-block-end: 7px;
	inset-inline-end: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--cc-ink);
	color: #ffffff;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 1px 6px rgba(6, 68, 108, .28);
	transition: background-color .15s ease, transform .15s ease;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__btn::before {
	content: "+";
	font-family: var(--cc-titre);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__btn:hover {
	background-color: var(--cc-accent);
	color: #ffffff;
	transform: scale(1.06);
}

/* Produit qui ne s'ajoute pas d'un clic : la fleche annonce un depart vers la
   fiche, la ou le « + » promettrait un ajout au panier. */
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__btn--voir::before {
	content: "\2192";
	font-size: 17px;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__btn.loading { opacity: .6; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__btn.added::before { content: "✓"; font-size: 15px; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__nom {
	display: -webkit-box;
	min-width: 0;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cc-ink);
	text-decoration: none;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__nom:hover { color: var(--cc-accent); }

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__prix {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cc-ink-soft);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__prix .amount { color: var(--cc-ink-soft); }
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__prix del { display: none; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__prix ins { text-decoration: none; }

/* Le lien « Voir le panier » que WooCommerce ajoute apres un ajax_add_to_cart
   n'a pas de place ici : le tiroir EST le panier. */
body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg .added_to_cart { display: none; }

/* =============================================================================
   ECRAN ETROIT OU PEU HAUT : on rend la place aux produits
   -----------------------------------------------------------------------------
   La contrainte du tiroir est d'abord VERTICALE : un portable a fenetre basse a
   le meme probleme qu'un telephone, d'ou `max-height`.

   ⚠️ Mais `max-height` seul laissait dehors le cas le plus courant de tous : un
   telephone recent fait 844 px de haut (iPhone 14, 15, 16), donc au-dessus du
   seuil. Il recevait la version large du tiroir, calee sur un ordinateur : gros
   rembourrages, detail sous-total / expedition, bande de reassurance. En tout
   493 px de decor pour 351 px de produits, sur l'ecran ou la place manque le
   plus. D'ou la seconde condition, en largeur.

   Les deux conditions sont separees par une virgule : le bloc s'applique des
   que l'UNE des deux est vraie. Tout ce qui est retire ici l'est au profit de
   la seule zone qui defile.
   ========================================================================== */

@media (max-width: 640px), (max-height: 780px) {

	body .nectar-slide-in-cart.nectar-modal .header { padding: 15px 18px 12px; }
	body .nectar-slide-in-cart.nectar-modal .inner .header > span { font-size: 18px; }
	body .nectar-slide-in-cart.nectar-modal .inner .header .close-cart { width: 32px; height: 32px; }

	body .nectar-slide-in-cart.nectar-modal .cc-sc-shipbar {
		margin: 12px 18px 0;
		padding: 9px 12px;
		font-size: 12.5px;
	}

	body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart { padding: 0 18px; }

	body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart li.mini_cart_item {
		grid-template-columns: 64px 1fr;
		padding: 12px 0;
	}

	body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart li.mini_cart_item img {
		width: 64px;
		max-width: 64px;
		height: 64px;
	}

	body .nectar-slide-in-cart.nectar-modal ul.woocommerce-mini-cart li.mini_cart_item > a:not(.remove) { font-size: 13.5px; }

	/* Le carrousel se resserre : cartes plus petites, un seul rang de titre.
	   Il passe ainsi de 236 a 190 px environ, rendus a la liste. */
	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg { padding: 12px 0 13px; }

	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__titre {
		margin-bottom: 8px;
		padding: 0 18px;
		font-size: 13.5px;
	}

	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__piste {
		gap: 9px;
		padding: 2px 18px 4px;
		scroll-padding-inline: 18px;
	}

	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__item {
		flex-basis: 124px;
		width: 124px;
	}

	/* Le titre reste sur DEUX lignes : reduit a une seule, il se resumait a
	   « Chausson… » sur les trois cartes visibles, ce qui n'aide personne a
	   choisir. Les 16 px que cela coute sont repris sur la ligne produit. */
	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__nom {
		margin-top: 6px;
		font-size: 12px;
	}

	body .nectar-slide-in-cart.nectar-modal .cc-sc-sugg__prix { font-size: 12px; }

	body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__total { padding: 12px 18px 0; }
	/* Meme surenchere de Salient que plus haut, meme reponse. */
	body .nectar-slide-in-cart.nectar-modal .woocommerce.widget_shopping_cart .total { padding: 12px 18px 0; }
	/* ⚠️ La bande de reassurance est masquee plus bas dans ce meme bloc. C'est
	   elle qui, ailleurs, ecarte le bouton du bord : sans elle, « Commander »
	   collait au bas de l'ecran. `env(safe-area-inset-bottom)` ajoute en plus
	   la barre de geste des iPhone recents, qui passerait par-dessus. */
	body .nectar-slide-in-cart.nectar-modal .woocommerce-mini-cart__buttons {
		padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	/* Le detail sous-total / expedition sort : le bandeau du haut dit deja
	   l'essentiel sur la livraison, et le Total suffit a decider. */
	body .nectar-slide-in-cart.nectar-modal .cc-sc-row:not(.cc-sc-row--total) { display: none; }
	body .nectar-slide-in-cart.nectar-modal .cc-sc-row--total { margin-top: 0; padding-top: 0; border-top: 0; }

	body .nectar-slide-in-cart.nectar-modal .cc-sc-cta { min-height: 48px; }

	/* Les pictogrammes de reassurance coutent 70 px pour ce qui est deja dit
	   ailleurs : ils sortent sur les ecrans bas. */
	body .nectar-slide-in-cart.nectar-modal .cc-sc-trust { display: none; }
}

/* =============================================================================
   SQUELETTE D'ATTENTE
   -----------------------------------------------------------------------------
   Aux dimensions exactes du contenu reel, pour que rien ne saute quand les
   vraies lignes arrivent. Revele par cc_sc_amorce() seulement si le cookie
   annonce un panier plein.
   ========================================================================== */

body .nectar-slide-in-cart.nectar-modal .cc-sc-att { padding: 18px 24px; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-att[hidden] { display: none; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__ligne {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 0 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--cc-line);
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__img,
body .nectar-slide-in-cart.nectar-modal .cc-sc-att i,
body .nectar-slide-in-cart.nectar-modal .cc-sc-att__bouton {
	display: block;
	border-radius: 8px;
	background-color: var(--cc-tile);
	background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
	background-size: 180% 100%;
	background-repeat: no-repeat;
	animation: cc-sc-balayage 1.25s ease-in-out infinite;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__img { width: 76px; height: 76px; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__txt {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 6px;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-att i { height: 12px; border-radius: 4px; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-att__txt i:nth-child(1) { width: 84%; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-att__txt i:nth-child(2) { width: 44%; }

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__pied {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 22px;
}

body .nectar-slide-in-cart.nectar-modal .cc-sc-att__pied i:nth-child(1) { width: 60%; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-att__pied i:nth-child(2) { width: 38%; }
body .nectar-slide-in-cart.nectar-modal .cc-sc-att__bouton { height: 54px; border-radius: 10px; }

@keyframes cc-sc-balayage {
	from { background-position: -80% 0; }
	to   { background-position: 180% 0; }
}

@media (prefers-reduced-motion: reduce) {
	body .nectar-slide-in-cart.nectar-modal .cc-sc-att__img,
	body .nectar-slide-in-cart.nectar-modal .cc-sc-att i,
	body .nectar-slide-in-cart.nectar-modal .cc-sc-att__bouton {
		animation: none;
	}
}


/* =============================================================================
   TROIS REGLES DE SALIENT QUI MONTENT PLUS HAUT
   -----------------------------------------------------------------------------
   Le theme qualifie certaines regles du tiroir avec le mode de panier choisi
   (.style_slide_in_click), ce qui les porte a quatre classes. Un prefixe a
   trois classes ne suffit plus : ces trois-la se visent nommement.

   ⚠️ Si le mode de panier change un jour dans les options du theme
   (Salient > WooCommerce > Cart style), cette classe change avec lui et ces
   trois regles cessent de s'appliquer. Les autres, prefixees .nectar-modal,
   continuent de fonctionner.
   ========================================================================== */

/* Largeur en dur de 600 px, calee sur la largeur d'origine du tiroir : le
   contenu debordait par la droite des qu'on elargit le tiroir. */
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart_content {
	width: auto;
	max-width: none;
}

/* En-tete pose en absolu : il sortait du flux et se superposait a la liste. */
body .nectar-slide-in-cart.style_slide_in_click .inner > .header {
	position: static;
}

/* Boutons du tiroir a `calc(50% - 5px)` : Salient en attend deux cote a cote,
   nous n'en avons qu'un, il doit prendre toute la largeur. */
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart a.cc-sc-cta {
	width: 100%;
}

/* Salient capitalise chaque mot des boutons du tiroir. */
body .nectar-slide-in-cart.nectar-modal .cc-sc-cta,
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart a.cc-sc-cta {
	text-transform: none;
}

/* =============================================================================
   SURENCHERES CIBLEES
   -----------------------------------------------------------------------------
   Salient et WooCommerce posent, sur quelques elements precis, des selecteurs
   qui montent a cinq classes. Le prefixe general n'y suffit plus. Plutot que
   de gonfler toute la feuille, on ne surencherit QUE sur ces elements-la, et
   on note en face quelle regle on double.

   Cette feuille ne comporte AUCUN !important : chaque conflit est resolu par
   un selecteur qui pese un cran de plus que celui qu'il double, ou en retirant
   du balisage la classe qui attirait la regle adverse.
   ========================================================================== */

/* Double : .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart
            .product-meta a:not(.remove)  =>  font-size: 16px
   Le titre tenait sur trois lignes et poussait la ligne a 120 px de haut. */
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .product-meta a:not(.remove) {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--cc-ink);
}

body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .product-meta a:not(.remove):hover {
	color: var(--cc-accent);
}

/* Prix et lien Supprimer : ils vivent dans .product-price, que Salient traite
   comme un bloc de prix classique. */
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .product-meta .product-price a.remove {
	font-size: 11px;
	font-weight: 400;
	color: var(--cc-ink-soft);
	text-transform: none;
	letter-spacing: 0;
}

/* Le carrousel, lui, n'a plus besoin d'aucune surenchere : il ne vit plus dans
   `ul.cart_list`, dont les regles generiques de WooCommerce et de Salient sont
   toutes portees par `ul.product_list_widget li` ou `.cart_list a`. Son seul
   point de friction restant etait la classe `button` du bouton d'ajout : elle a
   ete retiree du balisage, ce qui a supprime du meme coup les deux seuls
   !important que cette feuille comportait. */

/* -----------------------------------------------------------------------------
   Titre du produit : Salient descend a six classes, sans !important. On reprend
   donc SON selecteur mot pour mot, prefixe de `body`, ce qui suffit a passer
   devant sans surenchere inutile.
   -------------------------------------------------------------------------- */

/* ⚠️ Salient repasse ce titre en `display: inline` par un selecteur a six
   classes, et cale `.product-details` en `align-self: center`, ce qui le
   repliait sur 157 px des 276 disponibles : le nom passait a trois lignes, et
   aucune coupe ne s'appliquait faute d'element de bloc. Les deux regles
   ci-dessous rendent au titre sa largeur et le limitent a deux lignes. */
body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list .product-meta .product-details {
	align-self: stretch;
	width: 100%;
}

body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list .product-meta a:not(.remove) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--cc-ink);
	text-transform: none;
}

body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list .product-meta a:not(.remove):hover {
	color: var(--cc-accent);
}

body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list .product-meta .product-price a.remove {
	font-size: 11px;
	font-weight: 400;
	color: var(--cc-ink-soft);
}