/* ==========================================================================
   Les Savons de Jadis — front v2 — composants-react.css
   Habillage v2 des classes émises par les widgets React (frontend-widgets/), dont le balisage ne change pas.
   À charger après tokens.css, socle.css, sdj-icons.css et widgets.css : widgets.css garde la mise en place
   de la fenêtre « ajouté au panier » et des popins, cette feuille en reprend l'apparence.
   Les styles v1 de ces classes (style_custom.css) ne sont pas chargés en v2.

   Sommaire
     1. Icône panier de l'en-tête et de la barre mobile (CartBadge)
     2. Bouton d'ajout au panier (AddToCartButton)
     3. Bouton favori (FavoriteButton)
     4. Panier latéral (CartSidebar, CartItem)
     5. Fenêtre « Ajouté au panier » (CartAddedModal)
     6. Messages (ToastContainer)
     7. Popins (PopinManager)
     8. Mouvement réduit
   ========================================================================== */

/* 1. ICÔNE PANIER (CartBadge) ----------------------------------------------
   <div data-sdj-widget="cart-badge"> → <a class="sdj-header-icon"><svg/><span class="sdj-badge">n</span></a>
   Même gabarit que .action (socle.css). */
.sdj-header-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--vert-profond); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-header-icon:hover { background: var(--vert-brume); color: var(--vert-profond); }
.sdj-header-icon:active { transform: scale(.94); }
.sdj-header-icon:focus-visible { border-radius: 50%; }
.sdj-header-icon svg { width: 24px; height: 24px; fill: currentColor; }
.sdj-badge { position: absolute; top: 3px; right: 1px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-pilule); background: var(--or); color: var(--texte); border: 2px solid var(--blanc); font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* Sous 1024 px, le panier passe dans la barre du bas : le point de montage de l'en-tête est masqué
   et celui de la barre prend la forme d'une entrée de barre (pictogramme, libellé, compteur). */
.barre-mobile [data-sdj-widget="cart-badge"] { display: flex; min-width: var(--cible); }
.barre-mobile .sdj-header-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; border-radius: var(--r-pilule); font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--texte-moyen); }
.barre-mobile .sdj-header-icon:hover { background: none; color: var(--texte-moyen); }
.barre-mobile .sdj-header-icon::after { content: "Panier"; }
.barre-mobile .sdj-header-icon:focus-visible { outline-offset: -4px; border-radius: var(--r-pilule); }
.barre-mobile .sdj-badge { top: 6px; right: calc(50% - 24px); }
@media (max-width: 1023px) { .entete__actions [data-sdj-widget="cart-badge"] { display: none !important; } }

/* 2. BOUTON D'AJOUT AU PANIER (AddToCartButton) ------------------------------
   compact : <button class="btn-add-cart"><i class="fa fa-plus"></i> <span>Ajouter</span></button>
   complet : <button class="btn-add-to-cart"><i class="fa fa-cart-plus"></i> Ajouter au panier</button>
   .sdj-widget-success pendant 2 s après l'ajout ; disabled pendant l'envoi. Aucune ombre. */
.btn-add-cart { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-width: 48px; height: 48px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-pilule); background: var(--action); color: var(--sur-action); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; box-shadow: none; transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.btn-add-cart:hover { background: var(--action-survol); }
.btn-add-cart:active { transform: scale(.95); background: var(--action-appui); }
.btn-add-cart:focus-visible { border-radius: var(--r-pilule); }
.btn-add-cart i { font-size: 20px; }
@media (max-width: 1279px) {
  /* Comme .carte__ajout : sous 1280 px, le bouton devient rond, le libellé reste lu par les lecteurs d'écran */
  .btn-add-cart { width: 48px; padding: 0; }
  .btn-add-cart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.btn-add-to-cart { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 56px; padding: 0 var(--e-6); border: 1.5px solid transparent; border-radius: var(--r-pilule); background: var(--action); color: var(--sur-action); font-weight: 600; font-size: var(--fs-md); line-height: 1.2; text-align: center; box-shadow: none; transition: background-color var(--d-2) ease, border-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.btn-add-to-cart:hover { background: var(--action-survol); }
.btn-add-to-cart:active { transform: scale(.97); background: var(--action-appui); }
.btn-add-to-cart:focus-visible { border-radius: var(--r-pilule); }
.btn-add-to-cart i { font-size: 22px; }
.btn-add-cart:disabled, .btn-add-to-cart:disabled { cursor: progress; }
/* État « ajouté » : vert de la maquette (widgets.css pose un vert vif en !important) */
.btn-add-cart.sdj-widget-success, .btn-add-to-cart.sdj-widget-success { background: var(--vert-fonce) !important; border-color: var(--vert-fonce) !important; color: var(--blanc) !important; }
/* Dans le bloc d'achat de la fiche et dans les rappels, le bouton prend la place de .btn */
.achat__ligne .btn-add-to-cart { width: 100%; padding-inline: var(--e-4); }
.sommaire__achat .btn-add-to-cart, .achat-mobile .btn-add-to-cart { min-height: 48px; padding-inline: var(--e-4); font-size: .9375rem; }
.sommaire__achat .btn-add-to-cart { min-height: var(--cible); }

/* 3. BOUTON FAVORI (FavoriteButton) -------------------------------------------
   <button class="btn-favorite [btn-favorite-pdp] [is-favorite] [fav-pulse]">
     <i class="far fa-heart fav-icon-empty"></i><i class="fas fa-heart fav-icon-full"></i></button>
   Compact : posé en haut à droite de la carte (.carte est le repère ; le point de montage se place juste après
   .carte__visuel, comme le bouton .carte__favori de la maquette).
   Fiche produit : bouton rond à contour, dans la ligne d'achat. */
.btn-favorite { position: absolute; right: var(--e-2); top: var(--e-2); z-index: 2; display: grid; place-items: center; width: var(--cible); height: var(--cible); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--texte); font-size: 22px; box-shadow: none; transition: background-color var(--d-2) ease, color var(--d-2) ease, border-color var(--d-2) ease, transform var(--d-1) ease-out; }
.btn-favorite:hover { background: var(--blanc); color: var(--or-brun); }
.btn-favorite:active { transform: scale(.9); }
.btn-favorite:focus-visible { border-radius: 50%; }
.btn-favorite i { grid-area: 1 / 1; }
.btn-favorite .fav-icon-full { display: none; }
.btn-favorite.is-favorite { color: var(--or-ambre); }
.btn-favorite.is-favorite .fav-icon-empty { display: none; }
.btn-favorite.is-favorite .fav-icon-full { display: inline-block; }
/* sdj-icons.css colore le cœur plein en rouge : ici il prend l'or ambré du bouton, comme dans la maquette */
.btn-favorite .fav-icon-full::before { background: currentColor; }
.btn-favorite.fav-pulse i { animation: sdj-v2-favori .4s var(--ease-sortie); }
@keyframes sdj-v2-favori { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.btn-favorite-pdp { position: static; width: 56px; height: 56px; border: 1.5px solid var(--trait-champ); background: var(--blanc); font-size: 24px; }
.btn-favorite-pdp:hover { border-color: var(--or-fonce); color: var(--or-brun); }
.btn-favorite-pdp:active { transform: scale(.94); }
.btn-favorite-pdp.is-favorite { border-color: var(--or-ambre); }

/* 4. PANIER LATÉRAL (CartSidebar, CartItem) -----------------------------------
   #sdjCartOverlay(.open) et #sdjCartSidebar(.open) :
     .sdj-cart-swipe-handle, .sdj-cart-header (h3 + .sdj-cart-close), .sdj-cart-content :
       .sdj-cart-items > .sdj-cart-item (.sdj-cart-item-img + .sdj-cart-item-qty-badge, .sdj-cart-item-info, .sdj-cart-item-delete),
       .sdj-cart-promo, .sdj-cart-summary (.sdj-cart-summary-row, .sdj-cart-total, .sdj-cart-free),
       .sdj-cart-actions (.sdj-btn-cart, .sdj-btn-checkout), .sdj-cart-save (.sdj-btn-save-cart),
       ou .sdj-cart-empty (svg, p, .sdj-btn-shop).
   Le tiroir entre par la droite ; le geste « glisser pour fermer » du widget écrit transform en ligne. */
#sdjCartOverlay { position: fixed; inset: 0; z-index: var(--z-rideau); background: rgba(45, 42, 37, .5); opacity: 0; visibility: hidden; transition: opacity var(--d-3) ease, visibility 0s linear var(--d-3); }
#sdjCartOverlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
#sdjCartSidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-tiroir); display: flex; flex-direction: column; width: 420px; max-width: 100%; background: var(--blanc); border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--ombre-flottante); transform: translateX(105%); visibility: hidden; transition: transform var(--d-3) var(--ease-tiroir), visibility 0s linear var(--d-3); overscroll-behavior: contain; }
#sdjCartSidebar.open { transform: none; visibility: visible; transition-delay: 0s; }
.sdj-cart-swipe-handle { display: none; }
.sdj-cart-header { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-3) var(--e-3) var(--e-5); border-bottom: 1px solid var(--trait); }
.sdj-cart-header h3 { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--fs-lg); }
.sdj-cart-header h3 svg { width: 24px; height: 24px; color: var(--vert-fonce); }
.sdj-cart-close { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--texte-moyen); transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-cart-close:hover { background: var(--gris-plateau); color: var(--texte); }
.sdj-cart-close:active { transform: scale(.94); }
.sdj-cart-close:focus-visible { border-radius: 50%; }
.sdj-cart-close svg { width: 22px; height: 22px; }
/* La liste défile seule : le résumé et les actions restent accessibles en bas du tiroir */
.sdj-cart-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--e-5); }
.sdj-cart-items { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding-block: var(--e-2); }
.sdj-cart-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) var(--cible); align-items: center; gap: var(--e-3); padding-block: var(--e-3); }
.sdj-cart-item + .sdj-cart-item { border-top: 1px solid var(--gris-plateau); }
.sdj-cart-item-img { position: relative; width: 68px; height: 68px; }
.sdj-cart-item-img img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); background: var(--blanc); border: 1px solid var(--trait); }
.sdj-cart-item-qty-badge { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pilule); background: var(--or); color: var(--texte); border: 2px solid var(--blanc); font-size: var(--fs-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sdj-cart-item-info { min-width: 0; }
.sdj-cart-item-info h5 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-base); line-height: 1.3; overflow-wrap: anywhere; }
.sdj-cart-item-price { display: block; margin-top: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sdj-cart-item-delete { display: grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: 50%; color: var(--texte-moyen); transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-cart-item-delete:hover { background: var(--gris-plateau); color: var(--texte); }
.sdj-cart-item-delete:active { transform: scale(.92); }
.sdj-cart-item-delete:focus-visible { border-radius: 50%; }
.sdj-cart-item-delete:disabled { opacity: .5; cursor: progress; }
.sdj-cart-item-delete svg { width: 20px; height: 20px; }
.sdj-cart-promo { margin-top: var(--e-2); padding: var(--e-3) var(--e-4); background: var(--or-pale); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.4; }
.sdj-cart-promo strong { font-weight: 600; white-space: nowrap; }
.sdj-cart-summary { display: grid; gap: var(--e-2); padding-top: var(--e-4); font-size: .9375rem; }
.sdj-cart-summary-row { display: flex; justify-content: space-between; gap: var(--e-4); }
.sdj-cart-summary-row span:first-child { color: var(--texte-moyen); }
.sdj-cart-summary-row span:last-child { font-variant-numeric: tabular-nums; }
.sdj-cart-free { font-weight: 600; color: var(--vert-profond); }
.sdj-cart-summary .sdj-cart-total { margin-top: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--trait); font-size: var(--fs-md); font-weight: 600; }
.sdj-cart-summary .sdj-cart-total span:first-child { color: var(--texte); }
.sdj-cart-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); padding-bottom: var(--e-3); }
.sdj-btn-cart, .sdj-btn-checkout, .sdj-btn-shop { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-3); border: 1.5px solid transparent; border-radius: var(--r-pilule); font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-align: center; box-shadow: none; transition: background-color var(--d-2) ease, border-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-btn-cart:active, .sdj-btn-checkout:active, .sdj-btn-shop:active { transform: scale(.97); }
.sdj-btn-cart svg, .sdj-btn-checkout svg, .sdj-btn-shop svg, .sdj-btn-save-cart svg { flex: none; width: 22px; height: 22px; }
.sdj-btn-cart { border-color: var(--vert-fonce); color: var(--vert-profond); }
.sdj-btn-cart:hover { background: var(--vert-rosee); color: var(--vert-profond); }
.sdj-btn-checkout { background: var(--action); color: var(--sur-action); }
.sdj-btn-checkout:hover { background: var(--action-survol); color: var(--sur-action); }
.sdj-btn-checkout:active { background: var(--action-appui); }
.sdj-cart-save { display: flex; justify-content: center; padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
.sdj-btn-save-cart { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); font-weight: 600; color: var(--lien); text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color var(--d-2) ease; }
.sdj-btn-save-cart:hover { text-decoration-color: var(--or); }
.sdj-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-4); flex: 1; padding-block: var(--e-7); text-align: center; }
.sdj-cart-empty > svg { width: 96px; height: 96px; padding: 28px; border-radius: var(--r-galet-b); background: var(--vert-brume); color: var(--vert-fonce); }
.sdj-cart-empty p { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-lg); }
.sdj-btn-shop { padding-inline: var(--e-5); background: var(--vert-fonce); color: var(--blanc); }
.sdj-btn-shop:hover { background: var(--vert-profond); color: var(--blanc); }
@media (max-width: 1023px) {
  /* Repère du geste « glisser vers la droite pour fermer » */
  .sdj-cart-swipe-handle { display: block; position: absolute; left: 6px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: var(--trait); }
}
@media (max-width: 479px) {
  #sdjCartSidebar { border-radius: 0; }
  .sdj-cart-content { padding-inline: var(--e-4); }
  .sdj-cart-header { padding-left: var(--e-4); }
}

/* 5. FENÊTRE « AJOUTÉ AU PANIER » (CartAddedModal) ----------------------------
   .sdj-cart-added-overlay > .sdj-cart-added-modal : -close, -check, -title, -product (-img, -name),
   -summary, -actions (-btn-secondary, -btn-primary), -progress. Mise en place et minuterie dans widgets.css. */
.sdj-cart-added-overlay { padding: var(--e-4); background: rgba(45, 42, 37, .55); }
.sdj-cart-added-modal { max-width: 500px; max-height: calc(100dvh - 2 * var(--e-4)); overflow: hidden auto; padding: var(--e-6) var(--e-6) calc(var(--e-5) + 4px); border-radius: var(--r-lg); box-shadow: var(--ombre-flottante); }
.sdj-cart-added-close { top: var(--e-2); right: var(--e-2); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--texte-moyen); font-size: 28px; transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.sdj-cart-added-close:hover { background: var(--gris-plateau); color: var(--texte); }
.sdj-cart-added-close:focus-visible { border-radius: 50%; }
.sdj-cart-added-check { margin: 0 auto var(--e-3); border-radius: var(--r-galet-a); background: var(--or); color: var(--texte); }
.sdj-cart-added-title { margin: 0 0 var(--e-5); font-family: var(--font-titre); font-size: var(--fs-xl); font-weight: 700; color: var(--texte); }
.sdj-cart-added-product { gap: var(--e-4); margin-bottom: 0; padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); }
.sdj-cart-added-img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--trait); border-radius: var(--r-sm); background: var(--blanc); }
.sdj-cart-added-name { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-md); line-height: 1.25; color: var(--texte); overflow-wrap: anywhere; }
.sdj-cart-added-summary { align-items: baseline; gap: var(--e-4); margin: var(--e-4) var(--e-1) var(--e-5); font-size: var(--fs-sm); color: var(--texte-moyen); text-align: left; }
.sdj-cart-added-summary strong { font-size: var(--fs-lg); font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sdj-cart-added-actions { gap: var(--e-3); }
.sdj-cart-added-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); flex: 1 1 auto; min-height: 48px; padding: 0 var(--e-4); border: 1.5px solid transparent; border-radius: var(--r-pilule); font-size: var(--fs-base); font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: none; transition: background-color var(--d-2) ease, border-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-cart-added-btn:active { transform: scale(.97); }
.sdj-cart-added-btn svg { flex: none; width: 22px; height: 22px; margin-right: 0; vertical-align: 0; }
.sdj-cart-added-btn-secondary { background: var(--blanc); border-color: var(--texte); color: var(--texte); }
.sdj-cart-added-btn-secondary:hover { background: var(--texte); border-color: var(--texte); color: var(--blanc); }
.sdj-cart-added-btn-primary { background: var(--action); color: var(--sur-action); }
.sdj-cart-added-btn-primary:hover { background: var(--action-survol); }
.sdj-cart-added-btn-primary:active { background: var(--action-appui); }
.sdj-cart-added-progress { background: var(--or); }
@media (max-width: 479px) {
  .sdj-cart-added-modal { padding: var(--e-6) var(--e-4) calc(var(--e-4) + 4px); border-radius: var(--r-md); }
  .sdj-cart-added-actions { flex-direction: column-reverse; }
  .sdj-cart-added-btn { flex: none; width: 100%; }
}

/* 6. MESSAGES (ToastContainer) ------------------------------------------------
   <div class="cart-toast [cart-toast-error] [show]" style="top: …px"> [img] .cart-toast-text (strong, span) button
   Le widget place chaque message par un style en ligne (pile en haut à droite) : la position est conservée,
   seul l'habillage change. */
.cart-toast { position: fixed; right: var(--e-4); z-index: 99999; display: flex; align-items: center; gap: var(--e-3); max-width: min(420px, calc(100vw - 2rem)); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); background: var(--texte); color: var(--blanc); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.35; box-shadow: var(--ombre-flottante); transform: translateX(calc(100% + 2rem)); opacity: 0; transition: transform var(--d-3) var(--ease-sortie), opacity var(--d-2) ease; }
.cart-toast.show { transform: none; opacity: 1; }
.cart-toast img { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: var(--r-xs); background: var(--blanc); }
.cart-toast-text { min-width: 0; }
.cart-toast-text strong { display: block; font-weight: 600; }
.cart-toast-text strong i { color: var(--or-clair); }
.cart-toast-text span { display: block; color: rgba(255, 255, 255, .8); overflow-wrap: anywhere; }
.cart-toast button { flex: none; display: grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: 50%; color: rgba(255, 255, 255, .8); font-size: 24px; line-height: 1; transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.cart-toast button:hover { background: rgba(255, 255, 255, .14); color: var(--blanc); }
.cart-toast button:focus-visible { border-radius: 50%; outline-color: var(--blanc); }
.cart-toast-error { background: #7f1d1d; }
@media (max-width: 767px) { .cart-toast { right: var(--e-3); bottom: calc(var(--barre-mobile-h) + var(--e-5) + env(safe-area-inset-bottom, 0px)); } }

/* 7. POPINS (PopinManager) ------------------------------------------------------
   Mise en place dans widgets.css ; ici les rayons, les boutons (aplat, sans ombre ni dégradé)
   et l'en-tête décoratif, ramené du crème vers la sauge pâle. */
.sdj-popin-modal, .sdj-popin-card { border-radius: var(--r-lg); border-top-color: var(--vert); box-shadow: var(--ombre-flottante); }
.sdj-popin-card { border-radius: var(--r-md); }
.sdj-popin-figure { border-radius: 0; }
.sdj-popin-close { width: var(--cible); height: var(--cible); color: var(--texte-moyen); }
.sdj-popin-close:hover { color: var(--texte); }
.sdj-popin-title { font-family: var(--font-titre); color: var(--texte); }
.sdj-popin-text { color: var(--texte-moyen); }
.sdj-popin-deco { background: var(--vert-brume); }
.sdj-popin-deco-badge { background: var(--vert-fonce); box-shadow: 0 0 0 6px var(--blanc); }
.sdj-popin-btn, .sdj-popin-nl-btn { min-height: 48px; border-radius: var(--r-pilule); background: var(--action); color: var(--sur-action); font-weight: 600; box-shadow: none; filter: none; transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.sdj-popin-btn:hover, .sdj-popin-btn:focus, .sdj-popin-nl-btn:hover:not(:disabled) { background: var(--action-survol); color: var(--sur-action); box-shadow: none; filter: none; }
.sdj-popin-btn:active, .sdj-popin-nl-btn:active { transform: scale(.97); background: var(--action-appui); }
.sdj-popin-modal--newsletter .sdj-popin-btn, .sdj-popin-modal--newsletter .sdj-popin-btn:focus { background: var(--action); color: var(--sur-action); box-shadow: none; }
.sdj-popin-modal--newsletter { border-top-color: var(--or); }
.sdj-popin-nl-input { min-height: 48px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); }
.sdj-popin-nl-input:focus { border-color: var(--vert-profond); box-shadow: none; }
.sdj-popin-content--image { border-radius: var(--r-md); }

/* 8. MOUVEMENT RÉDUIT ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sdj-header-icon:active, .btn-add-cart:active, .btn-add-to-cart:active, .btn-favorite:active, .btn-favorite-pdp:active,
  .sdj-btn-cart:active, .sdj-btn-checkout:active, .sdj-btn-shop:active, .sdj-cart-added-btn:active, .sdj-popin-btn:active { transform: none; }
  .btn-favorite.fav-pulse i { animation: none; }
  #sdjCartSidebar, .cart-toast { transition: opacity .01ms, visibility 0s !important; }
  /* La fenêtre « ajouté au panier » se ferme à la fin de l'animation de sa barre : avec des animations ramenées à
     .01 ms (socle.css), elle se refermerait aussitôt. Barre retirée : la fenêtre reste jusqu'à ce qu'on la ferme. */
  .sdj-cart-added-progress { display: none; }
}

/* ============================================================
   Panier latéral : image d'en-tête conservée (demande du 2026-10-03)
   Même visuel que sur le site actuel (abeille et panier de savons),
   affiché entier en tête du panier, jamais agrandi au-delà de sa
   définition (760 x 192 px). Le titre et la croix occupent une ligne
   au-dessus de l'image, pour ne recouvrir ni l'abeille ni le panier :
   la marge basse réserve la hauteur de l'image (192 / 760 = 25,3 %).
   ============================================================ */
.sdj-cart-header {
  align-items: center;
  padding-top: var(--e-2);
  padding-bottom: calc(25.3% + var(--e-1));
  border-bottom: 0;
  background: #fdf8ec url('/assets/account/images/img-panier.png') center bottom / 100% auto no-repeat;
}
.sdj-cart-close { background: rgba(255, 255, 255, .78); color: var(--texte); }
.sdj-cart-close:hover { background: var(--blanc); }