/*
 * Sillage — "Votre sélection" (panier) + mini-panier du header.
 * Reprend telle quelle la maquette validée (Sillage_Panier_V1).
 *
 * Chargé sur TOUTES les pages (le mini-panier vit dans le header partout),
 * contrairement aux autres feuilles de style spécifiques à une page. Deux
 * conséquences pour la discipline anti-collision déjà établie :
 * 1) tout ce qui est spécifique à la page panier est scopé sous #cart-page,
 *    donc invisible ailleurs (aucun effet sur .summary/.item de la fiche
 *    produit, qui sont eux aussi des noms génériques utilisés par
 *    product.css) ;
 * 2) le mini-panier (visible partout) utilise des noms de classes déjà
 *    préfixés de façon unique ("mini-cart-...") pour ne collisionner avec
 *    rien, plutôt que de compter sur un scope.
 * Comme pour les pages précédentes, la règle globale non scopée
 * "section{padding:clamp(...)}" de main.css est neutralisée avant tout.
 */

#cart-page {
	--paper: #eee7dc;
	--soft: #f8f3eb;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #766b60;
	--line: #cbbdac;
	--dark: #171411;
	--dark2: #211b17;
	--tobacco: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
}
#cart-page section { padding: 0; }
#cart-page h2, #cart-page h3 { font-family: var(--serif); font-weight: 400; line-height: 1; margin: 0; }
#cart-page h2 { font-size: clamp(1.9rem, 3vw, 3.2rem); letter-spacing: -.04em; }
#cart-page h3 { font-size: 1.25rem; }
#cart-page p { margin: 0; color: var(--muted); }
#cart-page .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#cart-page .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	padding: 15px 20px; border: 1px solid currentColor; text-transform: uppercase;
	letter-spacing: .14em; font-size: .68rem; font-weight: 700; background: transparent; transition: .25s;
	min-height: 44px;
}
#cart-page .btn:hover { background: var(--ink); color: var(--ivory); }
#cart-page .btn-bronze { background: var(--bronze); border-color: var(--bronze); color: #fff; }
#cart-page .btn-bronze:hover { background: #111; border-color: #111; }

/* Le hero de cette page est désormais le composant partagé Sillage Page
   Header (assets/css/page-header.css), rendu hors de #cart-page. Le
   badge "N objets" reste une donnée réellement dynamique du panier — il
   est injecté juste après le header via le hook sillage_page_header_after
   (voir sillage_panier_hero_count() dans functions.php), pas scopé sous
   #cart-page puisqu'il vit hors de cette div. */
.sph-panier-count { background: #171411; padding: 18px 0; }
.sph-panier-count .hero-meta { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #a99a8c; }

/* ---------- Cart layout ---------- */
#cart-page .cart { padding: 50px 0 100px; }
#cart-page .cart-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; align-items: start; }

/* ---------- Item cards ---------- */
#cart-page .items { display: grid; gap: 18px; }
#cart-page .item { display: grid; grid-template-columns: 200px 1fr; gap: 24px; background: var(--soft); border: 1px solid var(--line); padding: 20px; transition: box-shadow .25s ease; }
#cart-page .item:hover { box-shadow: 0 16px 34px rgba(23, 20, 17, .12); }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : .item-content
   avait déjà min-width:0, mais pas .item-media (l'autre colonne, celle qui
   contient l'image) — l'image pouvait donc encore forcer le débordement. */
#cart-page .item-media { aspect-ratio: 4/5; overflow: hidden; background: #e4dacd; min-width: 0; }
#cart-page .item-media img { height: 100%; object-fit: cover; }
#cart-page .item-content { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
/* No align-items was set, so "Retirer" (a flex item) stretched to match
   the full height of the title/description block next to it, turning its
   border into a tall, oddly-shaped box instead of a compact button. */
#cart-page .item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
#cart-page .item-meta { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8c7159; }
#cart-page .item-title { margin-top: 6px; }
#cart-page .item-title a { color: var(--ink); }
#cart-page .item-desc { margin-top: 8px; color: var(--muted); font-size: .9rem; }
/* WooCommerce's own bundled stylesheet styles ".remove" as a small round
   "×" badge (fixed width/height/line-height + border-radius:100%) — since
   this rule never touched those specific properties, they applied
   unchallenged regardless of the ID-scoped selector's higher specificity
   (per-property cascade, not "my rule wins outright"). Reset explicitly. */
#cart-page a.remove {
	width: auto !important; height: auto !important; line-height: normal !important; border-radius: 0 !important; font-weight: 400 !important; text-align: left !important;
	border: 1px solid var(--line); background: transparent; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem;
	color: #8c7b6b !important; cursor: pointer; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
	padding: 0 14px; flex: none;
}
#cart-page a.remove:hover { color: #fff; background: var(--tobacco); border-color: var(--tobacco); }
#cart-page .item-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--line); }
#cart-page .item-info small { display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: #9b8877; }
#cart-page .item-info strong { font-family: var(--serif); font-weight: 400; }
#cart-page .item-bottom { display: flex; justify-content: space-between; align-items: end; margin-top: 20px; }
#cart-page .item-bottom .quantity { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #7d6e60; }
#cart-page .item-bottom .quantity input[type="number"] { width: 54px; border: 1px solid var(--line); background: #fff; padding: 6px; margin-left: 8px; }
#cart-page .item-price { font-family: var(--serif); font-size: 1.85rem; color: var(--ink); }

/* ---------- Cart actions (update cart) ---------- */
#cart-page .cart-actions { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
#cart-page .cart-actions .btn { background: transparent; color: var(--ink); border-color: var(--ink); }
#cart-page .cart-actions .btn:hover { background: var(--ink); color: var(--ivory); }

/* ---------- Continue block ---------- */
#cart-page .continue { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--stone); padding: 30px; margin-top: 20px; }
#cart-page .continue p { margin-top: 6px; }

/* ---------- Empty state ---------- */
#cart-page .empty { background: var(--soft); border: 1px solid var(--line); padding: 64px 34px; text-align: center; }
#cart-page .empty h2 { margin-bottom: 16px; }
#cart-page .empty p { max-width: 580px; margin: 0 auto 24px; }

/* ---------- Summary (sticky aside) ---------- */
#cart-page .summary { background: var(--dark2); color: #fff; padding: 30px; position: sticky; top: 24px; }
#cart-page .summary .eyebrow { color: #a8c4b8; }
#cart-page .summary h2 { color: #fff; font-size: 2.2rem; margin: 8px 0 24px; }
#cart-page .summary p { color: #b9aa9c; }
#cart-page .line { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
#cart-page .line span { color: #b9aa9c; font-size: .85rem; }
#cart-page .line strong { font-family: var(--serif); font-weight: 400; color: #fff; }
#cart-page .total { display: flex; justify-content: space-between; align-items: end; padding: 24px 0; }
#cart-page .total span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #b9aa9c; }
#cart-page .total strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; color: #fff; }
#cart-page .wc-proceed-to-checkout { margin-top: 6px; }
#cart-page .wc-proceed-to-checkout .btn { width: 100%; }
#cart-page .note { font-size: .78rem; color: #a99b8e; margin-top: 16px; text-align: center; }
#cart-page .shipping { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .13); }
#cart-page .shipping strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; display: block; color: #fff; }
#cart-page .shipping p { color: #a99b8e; font-size: .82rem; margin-top: 6px; }
#cart-page .code { margin-top: 20px; }
#cart-page .code summary { cursor: pointer; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #b9aa9c; }
#cart-page .code-row { display: flex; margin-top: 12px; border-bottom: 1px solid rgba(255, 255, 255, .3); align-items: center; }
#cart-page .code-row input { flex: 1; background: transparent; border: 0; color: #fff; padding: 12px 0; font-size: .9rem; }
#cart-page .code-row input::placeholder { color: rgba(255, 255, 255, .45); }
#cart-page .code-row button { border: 0; background: transparent; color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; cursor: pointer; min-height: 44px; padding: 0 6px; }

/* ---------- Reassurance band ---------- */
#cart-page .reassurance { background: var(--tobacco); color: #fff; padding: 60px 0; }
#cart-page .reassurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
#cart-page .reassurance article { padding-right: 26px; border-right: 1px solid rgba(255, 255, 255, .18); }
#cart-page .reassurance article:last-child { border-right: 0; padding-right: 0; }
#cart-page .reassurance h3 { font-size: 1.2rem; }
#cart-page .reassurance p { color: #d8c8ba; margin-top: 8px; }

/* ---------- Defensive resets for un-overridden WC core partials ---------- */
/* Shipping calculator / coupon result messages aren't in the override list —
   these resets keep their default markup from looking unstyled inside
   "Votre sélection" without touching those templates. */
#cart-page .woocommerce-shipping-calculator { margin-top: 14px; font-size: .82rem; color: #b9aa9c; }
#cart-page .woocommerce-shipping-calculator .button { color: #fff; text-decoration: underline; background: none; border: 0; cursor: pointer; }
#cart-page .shipping-calculator-form { margin-top: 10px; display: grid; gap: 10px; }
#cart-page .shipping-calculator-form select,
#cart-page .shipping-calculator-form input { background: #fff; border: 1px solid var(--line); padding: 10px; color: var(--ink); width: 100%; }
#cart-page .woocommerce-message,
#cart-page .woocommerce-error,
#cart-page .woocommerce-info {
	background: var(--soft); border: 1px solid var(--line);
	color: var(--ink); padding: 16px 20px; margin-bottom: 14px; list-style: none; font-size: .85rem;
}
#cart-page .woocommerce-error li { list-style: none; margin: 0; }
#cart-page .woocommerce-error li + li { margin-top: 6px; }
#cart-page .woocommerce-message .button { display: inline-flex; padding: 8px 14px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; margin-left: 10px; }

/* ---------- Mini-cart dropdown (header, every page) ---------- */
.mini-cart-wrap { position: relative; }
.mini-cart-dropdown {
	position: absolute; top: calc(100% + 18px); right: -8px; width: min(340px, 90vw); max-height: 70vh; overflow-y: auto;
	background: #211b17; color: #fff; border: 1px solid rgba(255, 255, 255, .16); padding: 22px;
	z-index: 90; opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mini-cart-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart-dropdown { overflow-x: hidden; }
/* WooCommerce's own ".product_list_widget li"/".cart_list li" styling
   (still enqueued) floats each item, laying them out side by side instead
   of stacked — the dropdown only scrolls the whole panel (.mini-cart-dropdown
   already caps at 70vh) rather than each item individually, so 1-3 objects
   never trigger an inner scrollbar. */
.mini-cart-list {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	display: flex !important; flex-direction: column !important; gap: 16px;
	width: 100%;
}
.mini-cart-item {
	display: grid !important; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: start;
	padding: 0 0 14px !important; margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .1);
	float: none !important; width: 100% !important; min-width: 0;
}
/* WooCommerce's own clearfix — ".woocommerce-page ul.cart_list li::before/::after
   {content:' ';display:table}" — only activates on pages whose <body> carries
   the "woocommerce-page" class (the cart page; not the homepage, which is why
   this only broke there). Since .mini-cart-item is a grid container, that
   generated pseudo-box became an extra, invisible 4th grid item and pushed
   media/content/remove sideways into each other. */
.mini-cart-item::before, .mini-cart-item::after { content: none !important; display: none !important; }
/* WooCommerce's own bundled stylesheet (woocommerce-layout.css, still
   enqueued on this site) floats the mini-cart thumbnail and sizes it with
   its own !important rules — it was escaping .mini-cart-media's box and
   overlapping the title text. Blindaged the same way product.css already
   had to for the price color, for the same reason. */
.mini-cart-media {
	width: 54px; height: 54px; overflow: hidden; background: #33291f; flex: none; float: none !important; margin: 0 !important;
	display: flex !important; align-items: center; justify-content: center;
}
.mini-cart-media img {
	width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center;
	float: none !important; position: static !important; margin: 0 !important; top: auto !important; left: auto !important;
}
.mini-cart-content { min-width: 0; overflow: hidden; }
.mini-cart-title {
	font-family: Georgia, "Times New Roman", serif; font-size: .92rem; font-weight: 400; margin: 0; line-height: 1.25;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mini-cart-title a { color: #fff; }
.mini-cart-price { display: block; margin-top: 4px; font-size: .76rem; color: #c7baad; white-space: nowrap; }
.mini-cart-remove { border: 0; background: none; color: #a99b8e; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px; flex: none; }
.mini-cart-remove:hover { color: #fff; }
.mini-cart-total { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; color: #c7baad; }
.mini-cart-total strong { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.15rem; color: #fff; }
.mini-cart-buttons { display: flex !important; gap: 10px; margin: 16px 0 0 !important; padding: 0 !important; }
/* Same WooCommerce-default-collision as the thumbnail above: ".woocommerce
   a.button" (0,2,1) otherwise wins over ".mini-cart-buttons .button"
   (0,2,0) and repaints these as the default grey/blue WooCommerce button. */
.mini-cart-buttons .button {
	flex: 1; display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px !important;
	border: 1px solid #fff !important; border-radius: 0 !important; text-transform: uppercase; letter-spacing: .1em; font-size: .6rem !important;
	text-align: center; color: #fff !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important;
	width: auto !important; margin: 0 !important;
}
.mini-cart-buttons .button:hover { background: #fff !important; color: #211b17 !important; }
.mini-cart-buttons .checkout { background: #6f9483 !important; border-color: #6f9483 !important; }
.mini-cart-buttons .checkout:hover { background: #fff !important; color: #211b17 !important; }
.mini-cart-empty { text-align: center; padding: 16px 0 4px; }
.mini-cart-empty p { color: #c7baad; margin-bottom: 14px; }
.mini-cart-empty .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 16px;
	border: 1px solid #fff; color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: .64rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	#cart-page .cart-grid { grid-template-columns: 1fr; }
	#cart-page .summary { position: static; }
	#cart-page .item { grid-template-columns: 160px 1fr; }
}
@media (max-width: 640px) {
	#cart-page .item { grid-template-columns: 1fr; }
	#cart-page .item-info { grid-template-columns: 1fr 1fr; }
	#cart-page .continue { align-items: flex-start; flex-direction: column; gap: 18px; }
	#cart-page .reassurance-grid { grid-template-columns: 1fr; }
	#cart-page .reassurance article { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); padding: 0 0 20px; }
	/* L'ancien "right:-60px" décalait le panneau par rapport à l'icône panier
	   (.mini-cart-wrap), un repère qui bouge avec le padding du header —
	   à certaines largeurs (ex. 320px) le panneau dépassait le viewport de
	   quelques pixels sur la droite (bord droit coupé, contenu inaccessible).
	   position:fixed avec des marges fixes garantit qu'il reste dans l'écran
	   quelle que soit la position de l'icône. */
	.mini-cart-dropdown {
		position: fixed; top: 96px; left: 16px; right: 16px; width: auto; max-height: calc(100vh - 116px);
	}
}