/**
 * css/produit-detail-premium.css
 * Generated by extraction from produit-detail.html on 2026-05-03T11:54:20.261Z
 * Original location: lines 539-2860 of produit-detail.html
 * Cache-bust : ?v=YYYYMMDD-HHMM bumper si modifié.
 */

  /* ═══════════════════════════════════════════════
     PREMIUM ENHANCEMENTS — produit-detail-premium.css
     (inlined for portability, isolé du CSS existant)
     ═══════════════════════════════════════════════ */

  /* --- Breadcrumb --- */
  .breadcrumb-nav { padding: 14px 0 8px; font-size: 0.82rem; color: #888; }
  .breadcrumb-nav a { color: inherit; text-decoration: none; transition: color .2s; }
  .breadcrumb-nav a:hover { color: var(--primary, #000); }
  .breadcrumb-nav span.sep { margin: 0 6px; }
  .breadcrumb-nav span.current { color: #333; font-weight: 500; }

  /* --- Badges --- */
  .product-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  }
  .badge-new      { background: #111; color: #fff; }
  .badge-promo    { background: #e63946; color: #fff; }
  .badge-bestseller { background: #f4a261; color: #fff; }
  .badge-lowstock { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }

  /* --- Social proof --- */
  .social-proof {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: #e63946; margin-bottom: 10px;
    animation: pulse-soft 2s infinite;
  }
  .social-proof i { font-size: 0.75rem; }
  @keyframes pulse-soft {
    0%,100% { opacity: 1; } 50% { opacity: .7; }
  }

  /* --- Livraison estimée --- */
  .delivery-estimate {
    font-size: 0.82rem; color: #2d6a4f; margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
  }
  .delivery-estimate i { color: #40916c; }

  /* --- Guide des tailles (lien inline) --- */
  .size-guide-link {
    font-size: 0.78rem; color: #666; text-decoration: underline; cursor: pointer;
    margin-left: 10px; transition: color .2s;
  }
  .size-guide-link:hover { color: #111; }

  /* --- Wishlist button côte à côte panier --- */
  .product-actions {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  }
  .wishlist-btn-detail {
    width: 52px; height: 52px; border-radius: 50%;
    border: 1.5px solid #ccc; background: transparent; cursor: pointer;
    font-size: 1.25rem; color: #888; transition: all .25s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .wishlist-btn-detail:hover, .wishlist-btn-detail.active {
    border-color: #e63946; color: #e63946;
    transform: scale(1.08);
  }
  .wishlist-btn-detail.active i { font-weight: 900; }

  /* --- Micro-animation: bouton add-to-cart --- */
  .add-to-cart-btn {
    transition: transform .18s, box-shadow .18s, background .18s !important;
    position: relative; overflow: hidden;
  }
  .add-to-cart-btn:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }
  .add-to-cart-btn:not([disabled]):active { transform: scale(.97); }
  .add-to-cart-btn .btn-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.35); transform: scale(0);
    animation: ripple .55s linear; pointer-events: none;
  }
  @keyframes ripple { to { transform: scale(4); opacity: 0; } }

  /* --- Micro-animation: color swatches --- */
  .color-option {
    transition: transform .2s, box-shadow .2s !important;
  }
  .color-option.selected {
    transform: scale(1.18) !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111 !important;
  }
  .color-option:hover { transform: scale(1.1) !important; }

  /* --- Micro-animation: size options --- */
  .option-value {
    transition: background .18s, color .18s, transform .18s, border-color .18s !important;
  }
  .option-value:hover { transform: scale(1.05) !important; }
  .option-value.selected {
    background: #111 !important; color: #fff !important;
    border-color: #111 !important; transform: scale(1.05) !important;
  }

  /* --- Bloc réassurance --- */
  .reassurance-block {
    display: flex; gap: 0; flex-wrap: wrap;
    border: 1px solid #e8e8e8; border-radius: 12px;
    overflow: hidden; margin: 20px 0;
  }
  .reassurance-item {
    flex: 1 1 120px; padding: 14px 12px;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; text-align: center; border-right: 1px solid #e8e8e8;
    transition: background .2s;
  }
  .reassurance-item:last-child { border-right: none; }
  .reassurance-item:hover { background: #f9f9f9; }
  .reassurance-item i { font-size: 1.3rem; color: #111; }
  .reassurance-item span { font-size: 0.72rem; font-weight: 600; color: #333; }
  .reassurance-item small { font-size: 0.65rem; color: #888; }

  /* === REASSURANCE ICON CIRCLES (mobile, 2026-04-23) ===
     Habille chaque <i> FontAwesome d'un cercle premium vert primary.
     Inline ici (pas via tu-mobile-polish.css) pour garantir le rendu
     dès le first paint, sans dépendre de l'injection JS de global.js.
     Specificité (0,1,1) sans !important par défaut, !important sur les
     dimensions critiques pour battre la règle .reassurance-item i (0,1,1)
     ci-dessus. */
  @media (max-width: 768px) {
    .reassurance-block .reassurance-item > i {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      max-width: 44px !important;
      max-height: 44px !important;
      aspect-ratio: 1 / 1 !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      background: rgba(46, 204, 113, 0.10) !important;
      border: 1px solid rgba(46, 204, 113, 0.22) !important;
      color: #1E8449 !important;
      font-size: 18px !important;
      line-height: 1 !important;
      margin: 0 auto 6px !important;
      padding: 0 !important;
      flex-shrink: 0 !important;
    }
    body.dark-mode .reassurance-block .reassurance-item > i {
      background: rgba(46, 204, 113, 0.16) !important;
      border-color: rgba(46, 204, 113, 0.30) !important;
      color: #5ED480 !important;
    }
  }

  /* --- Gallery premium --- */
  .main-image-container { position: relative; overflow: hidden; border-radius: 12px; cursor: zoom-in; }
  .main-image-container:hover #main-product-image { transform: scale(1.04); }
  #main-product-image { transition: transform .4s ease; display: block; width: 100%; }
  .gallery-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.85); border: none; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 5;
    transition: background .2s, transform .2s;
    backdrop-filter: blur(4px);
  }
  .gallery-nav-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
  .gallery-nav-btn.prev { left: 10px; }
  .gallery-nav-btn.next { right: 10px; }
  .zoom-icon {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(255,255,255,.8); border-radius: 50%;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; color: #333; cursor: pointer; backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: background .2s;
  }
  .zoom-icon:hover { background: #fff; }
  .thumbnail-image { transition: border-color .2s, transform .2s; cursor: pointer; border-radius: 6px; }
  .thumbnail-image:hover { transform: scale(1.06); }
  .thumbnail-image.active { border-color: #111 !important; }

  /* --- Lightbox --- */
  .lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.92); align-items: center; justify-content: center;
    flex-direction: column;
  }
  .lightbox-overlay.open { display: flex; }
  .lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
  .lightbox-close {
    position: absolute; top: 18px; right: 22px;
    color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
    background: none; border: none; transition: transform .2s;
  }
  .lightbox-close:hover { transform: rotate(90deg); }
  .lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 2.2rem; cursor: pointer; background: none; border: none;
    padding: 10px 16px; transition: transform .2s;
  }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  .lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
  .lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
  .lightbox-dots { display: flex; gap: 8px; margin-top: 14px; }
  .lightbox-dot {
    width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4);
    cursor: pointer; transition: background .2s;
  }
  .lightbox-dot.active { background: #fff; }

  /* --- Reviews --- */
  .reviews-section { padding: 40px 0; }
  .reviews-section h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; }
  .reviews-summary {
    display: flex; align-items: center; gap: 24px; margin-bottom: 28px;
    padding: 20px; background: #f9f9f9; border-radius: 12px;
  }
  .reviews-score { font-size: 3rem; font-weight: 800; line-height: 1; }
  .reviews-stars { color: #f4a261; font-size: 1.2rem; }
  .reviews-count { font-size: 0.82rem; color: #888; }
  .review-card {
    padding: 18px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 14px;
    transition: box-shadow .2s;
  }
  .review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
  .review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .review-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: #111; color: #fff; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0;
  }
  .review-name { font-weight: 600; font-size: .9rem; }
  .review-date { font-size: .75rem; color: #aaa; margin-top: 1px; }
  .review-stars { color: #f4a261; font-size: .85rem; margin-bottom: 6px; }
  .review-text { font-size: .85rem; color: #555; line-height: 1.5; }
  .review-verified { font-size: .72rem; color: #2d6a4f; }

  /* --- Cross-sell --- */
  .crosssell-section { padding: 30px 0; border-top: 1px solid #eee; }
  .crosssell-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; }

  /* --- Sticky mobile bar --- */
  .sticky-mobile-bar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: #fff; border-top: 1px solid #e8e8e8;
    padding: 10px 16px; gap: 12px;
    align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    transform: translateY(100%); transition: transform .3s;
  }
  .sticky-mobile-bar.visible { transform: translateY(0); }
  .sticky-mobile-price { font-weight: 700; font-size: 1.05rem; flex: 1; }
  .sticky-mobile-btn {
    flex: 2; padding: 12px 18px; border-radius: 8px;
    background: #111; color: #fff; border: none; font-weight: 600;
    font-size: .9rem; cursor: pointer; transition: background .2s;
  }
  .sticky-mobile-btn:hover { background: #333; }
  @media (max-width: 768px) { .sticky-mobile-bar { display: flex; } }

  /* --- Size guide modal --- */
  .size-guide-modal {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.72); align-items: center; justify-content: center;
    padding: 18px;
  }
  .size-guide-modal.open { display: flex; }
  .size-guide-inner {
    background: var(--white, #fff); color: var(--dark-color, #2C3E50);
    border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 28px;
    max-width: 560px; width: min(100%, 560px); max-height: 80vh; overflow-y: auto;
    position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.28);
  }
  .size-guide-inner h3 {
    font-size: 1.2rem; font-weight: 800; margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
  }
  .size-guide-intro { font-size: .88rem; color: var(--gray, #7F8C8D); margin-bottom: 16px; }
  .size-guide-inner table { width: 100%; border-collapse: collapse; font-size: .85rem; overflow: hidden; border-radius: 12px; }
  .size-guide-inner th, .size-guide-inner td {
    padding: 10px 12px; border: 1px solid #e8e8e8; text-align: center;
  }
  .size-guide-inner th { background: rgba(46,204,113,.10); color: var(--dark-color, #2C3E50); font-weight: 700; }
  .size-guide-inner td:first-child { font-weight: 700; }
  .size-guide-close {
    position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
    font-size: 1.1rem; background: rgba(0,0,0,.04); border: none; border-radius: 999px;
    cursor: pointer; color: #666; display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, transform .2s;
  }
  .size-guide-close:hover { background: rgba(0,0,0,.08); color: #111; transform: rotate(90deg); }
  .size-guide-close:focus-visible { outline: 2px solid var(--primary-color, #2ECC71); outline-offset: 2px; }
  body.dark-mode .size-guide-inner {
    background: var(--bg-card, #1E1E1E); color: var(--text-primary, #FFFFFF);
    border-color: var(--border-color, #333333);
  }
  body.dark-mode .size-guide-intro { color: var(--text-secondary, #B8B8B8); }
  body.dark-mode .size-guide-inner th,
  body.dark-mode .size-guide-inner td { border-color: var(--border-color, #333333); }
  body.dark-mode .size-guide-inner th { background: rgba(46,204,113,.14); color: var(--text-primary, #FFFFFF); }
  body.dark-mode .size-guide-inner td { background: rgba(255,255,255,.015); color: var(--text-secondary, #B8B8B8); }
  body.dark-mode .size-guide-inner td:first-child { color: var(--text-primary, #FFFFFF); }
  body.dark-mode .size-guide-close { background: rgba(255,255,255,.06); color: var(--text-secondary, #B8B8B8); }
  body.dark-mode .size-guide-close:hover { background: rgba(255,255,255,.12); color: var(--text-primary, #FFFFFF); }
  
  /* --- Reviews: vraie section commentaires --- */
  body.dark-mode .reviews-summary { background: #151515; border: 1px solid #2e2e2e; }
  body.dark-mode .reviews-score { color: var(--text-primary, #FFFFFF); }
  body.dark-mode .reviews-count,
  body.dark-mode .review-date,
  body.dark-mode .review-text { color: var(--text-secondary, #B8B8B8); }
  body.dark-mode .review-card { background: #151515; border-color: #2e2e2e; }
  body.dark-mode .review-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .reviews-actions {
    display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; margin-bottom: 22px;
  }
  @media (max-width: 860px) { .reviews-actions { grid-template-columns: 1fr; } }
  .review-form-card,
  .reviews-highlights {
    border: 1px solid #e8e8e8; border-radius: 12px; padding: 18px;
    background: #fff;
  }
  body.dark-mode .review-form-card,
  body.dark-mode .reviews-highlights { background: #151515; border-color: #2e2e2e; }
  .review-form-card h3,
  .reviews-highlights h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
  .review-form-note { font-size: .82rem; color: var(--gray, #7F8C8D); margin-bottom: 14px; }
  body.dark-mode .review-form-note { color: var(--text-secondary, #B8B8B8); }
  .review-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  @media (max-width: 620px) { .review-form-grid { grid-template-columns: 1fr; } }
  .review-field { display: flex; flex-direction: column; gap: 7px; }
  .review-field label { font-size: .8rem; font-weight: 700; }
  .review-field input,
  .review-field select,
  .review-field textarea {
    width: 100%; border-radius: 10px; border: 1px solid #ddd; background: #fff;
    color: var(--dark-color, #2C3E50); padding: 11px 12px; font: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .review-field textarea { resize: vertical; min-height: 120px; }
  .review-field input:focus,
  .review-field select:focus,
  .review-field textarea:focus { outline: none; border-color: var(--primary-color, #2ECC71); box-shadow: 0 0 0 3px rgba(46,204,113,.15); }
  body.dark-mode .review-field input,
  body.dark-mode .review-field select,
  body.dark-mode .review-field textarea { background: #101010; border-color: #333; color: var(--text-primary, #FFFFFF); }
  .review-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
  .review-submit-note { font-size: .78rem; color: var(--gray, #7F8C8D); }
  .review-submit-btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
    border-radius: 999px; background: var(--primary-color, #2ECC71); color: #fff;
    padding: 11px 18px; font-weight: 700; transition: transform .18s, background .18s, box-shadow .18s;
  }
  .review-submit-btn:hover { background: var(--success, #27AE60); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,204,113,.18); }
  .reviews-highlights ul { list-style: none; display: grid; gap: 10px; }
  .reviews-highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--gray, #7F8C8D); }
  .reviews-highlights i { color: var(--primary-color, #2ECC71); margin-top: 2px; }
  body.dark-mode .reviews-highlights li { color: var(--text-secondary, #B8B8B8); }
  .review-card.review-card-new { border-color: rgba(46,204,113,.45); box-shadow: 0 10px 24px rgba(46,204,113,.10); }
  .review-card.review-card-new::after {
    content: 'Nouveau'; position: absolute; top: 14px; right: 14px; font-size: .64rem; font-weight: 800;
    background: var(--primary-color, #2ECC71); color: #fff; border-radius: 999px; padding: 5px 9px;
  }
  .review-empty { border: 1px dashed #ccc; border-radius: 12px; padding: 18px; text-align: center; color: var(--gray, #7F8C8D); }
  body.dark-mode .review-empty { border-color: #333; color: var(--text-secondary, #B8B8B8); }

  /* --- Wishlist active state correction --- */
  .wishlist-btn-detail { position: relative; }
  .wishlist-btn-detail.active { animation: wishlist-heartbeat .35s ease; }
  .wishlist-btn-detail.active i { color: #fff !important; }

  /* --- Better alignment for suggested & cross-sell cards --- */
  #suggested-products,
  #crosssell-products {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch;
  }
  @media (max-width: 980px) {
    #suggested-products,
    #crosssell-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    #suggested-products,
    #crosssell-products { grid-template-columns: 1fr; }
  }
  #suggested-products.compact-grid,
  #crosssell-products.compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: start;
  }
  .product-card { height: 100%; display: flex; }
  .product-card .product-link {
    display: flex; flex-direction: column; width: 100%; height: 100%; color: inherit; text-decoration: none;
    border: 1px solid rgba(255,255,255,.04); border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,.02);
  }
  .product-card .product-thumb {
    width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; flex-shrink: 0;
  }
  .product-card .product-link h4 {
    margin: 14px 14px 6px; font-size: .92rem; line-height: 1.35; min-height: 2.6em;
    text-align: center; display: flex; align-items: center; justify-content: center;
  }
  .product-card .product-link .product-price {
    margin: auto 14px 16px; text-align: center; font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════════════
     RECOMMANDATIONS BAS DE PAGE — PREMIUM
     -----------------------------------------------------------------
     Deux sections distinctes :
     - .tu-reco--suggest : "Vous aimerez peut-être" — sélection / découverte
     - .tu-reco--outfit  : "Complétez votre tenue" — styling / look complet
     Mêmes cartes produit (markup JS préservé) mais habillage radicalement
     différent par section pour éviter l'effet "deux rangées identiques".
     Tokens --tu-* hérités de style.css, fallback sur les valeurs en dur
     si les tokens ne sont pas chargés.
     ═══════════════════════════════════════════════════════════════════ */

  .tu-reco {
    position: relative;
    margin: 56px auto 32px;
    padding: 36px 18px 28px;
    border-radius: 22px;
    isolation: isolate;
  }

  /* Header éditorial commun */
  .tu-reco .tu-reco-head {
    text-align: center;
    margin: 0 auto 24px;
    max-width: 680px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .tu-reco .tu-reco-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 900;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--tu-accent-text, #1E8449);
    padding: 5px 14px; border-radius: 999px;
    background: rgba(46, 204, 113, .10);
    border: 1px solid rgba(46, 204, 113, .22);
  }
  .tu-reco-eyebrow-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary-color, #2ECC71);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, .18);
    animation: tu-reco-pulse 2.4s ease-in-out infinite;
  }
  @keyframes tu-reco-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46, 204, 113, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(46, 204, 113, .05); }
  }
  .tu-reco-head h2 {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--tu-fg, #2C3E50);
  }
  body.dark-mode .tu-reco-head h2 { color: var(--tu-fg, #FFFFFF); }
  .tu-reco-intro {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tu-fg-soft, #5A6C7B);
    max-width: 58ch;
  }
  body.dark-mode .tu-reco-intro { color: var(--tu-fg-soft, #B8B8B8); }

  /* ===== VARIANTE SUGGEST : minimaliste, "même univers" ===== */
  .tu-reco--suggest {
    background:
      radial-gradient(60% 50% at 50% -10%, rgba(46, 204, 113, .06), transparent 70%),
      transparent;
    border-top: 1px solid rgba(44, 62, 80, .08);
    padding-top: 44px;
  }
  body.dark-mode .tu-reco--suggest {
    background:
      radial-gradient(60% 50% at 50% -10%, rgba(46, 204, 113, .10), transparent 70%),
      transparent;
    border-top-color: rgba(255, 255, 255, .06);
  }

  /* Badge discret sur cartes suggest */
  .tu-reco--suggest .product-card {
    position: relative;
  }
  .tu-reco--suggest .product-card::after {
    content: "Sélection";
    position: absolute;
    top: 10px; left: 10px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(44, 62, 80, .72);
    padding: 3px 10px; border-radius: 999px;
    backdrop-filter: blur(6px);
    z-index: 2; opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .tu-reco--suggest .product-card:hover::after {
    opacity: 1; transform: translateY(0);
  }

  /* ===== VARIANTE OUTFIT : "complétez votre tenue" — plus éditorial ===== */
  .tu-reco--outfit {
    background:
      radial-gradient(80% 70% at 0% 0%, rgba(212, 168, 46, .08), transparent 60%),
      radial-gradient(60% 50% at 100% 100%, rgba(46, 204, 113, .10), transparent 65%),
      linear-gradient(180deg, rgba(46, 204, 113, .04), rgba(212, 168, 46, .02));
    border: 1px solid rgba(46, 204, 113, .18);
    box-shadow: 0 12px 32px rgba(44, 62, 80, .06);
    padding: 44px 28px 34px;
  }
  body.dark-mode .tu-reco--outfit {
    background:
      radial-gradient(80% 70% at 0% 0%, rgba(212, 168, 46, .10), transparent 60%),
      radial-gradient(60% 50% at 100% 100%, rgba(46, 204, 113, .12), transparent 65%),
      linear-gradient(180deg, rgba(30, 132, 73, .08), rgba(202, 111, 30, .04));
    border-color: rgba(46, 204, 113, .22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .34);
  }
  .tu-reco--outfit .tu-reco-eyebrow {
    color: var(--tu-accent-text, #1E8449);
    background: linear-gradient(135deg, rgba(46, 204, 113, .14), rgba(212, 168, 46, .10));
    border-color: rgba(46, 204, 113, .30);
  }
  .tu-reco--outfit .tu-reco-head h2 {
    font-size: clamp(24px, 2.6vw, 30px);
  }
  /* Décoration top gauche — petit filet accent */
  .tu-reco--outfit::before {
    content: "";
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(46, 204, 113, .5) 20%,
      rgba(212, 168, 46, .5) 80%,
      transparent 100%);
    border-radius: 2px;
  }

  /* Badge "Associer" sur cartes outfit */
  .tu-reco--outfit .product-card {
    position: relative;
  }
  .tu-reco--outfit .product-card::after {
    content: "✦ Associer";
    position: absolute;
    top: 10px; right: 10px;
    font-size: 10px; font-weight: 900;
    letter-spacing: .12em; text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary-color, #2ECC71), #27AE60);
    padding: 4px 10px; border-radius: 999px;
    box-shadow: 0 6px 14px rgba(46, 204, 113, .30);
    z-index: 2; opacity: 0;
    transform: translateY(-6px) scale(.96);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .tu-reco--outfit .product-card:hover::after {
    opacity: 1; transform: translateY(0) scale(1);
  }

  /* ===== CARTES PRODUIT — upgrade commun aux deux sections ===== */
  .tu-reco .product-card .product-link {
    background: var(--tu-surface, #FFFFFF);
    border: 1px solid rgba(44, 62, 80, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(44, 62, 80, .06);
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease,
                border-color .28s ease;
  }
  body.dark-mode .tu-reco .product-card .product-link {
    background: var(--tu-surface, #1E1E1E);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .40);
  }
  .tu-reco .product-card .product-link:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 204, 113, .28);
    box-shadow: 0 18px 38px rgba(46, 204, 113, .14),
                0 2px 8px rgba(44, 62, 80, .08);
  }
  body.dark-mode .tu-reco .product-card .product-link:hover {
    border-color: rgba(46, 204, 113, .32);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .60);
  }

  /* Image : ratio + zoom au hover */
  .tu-reco .product-card .product-thumb {
    aspect-ratio: 4/5;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
    background: linear-gradient(180deg, rgba(44,62,80,.03), rgba(44,62,80,.06));
  }
  .tu-reco .product-card .product-link:hover .product-thumb {
    transform: scale(1.04);
  }

  /* Typo nom + prix premium */
  .tu-reco .product-card .product-link h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--tu-fg, #2C3E50);
    min-height: auto;
    margin: 14px 16px 4px;
    text-align: left;
    justify-content: flex-start;
    line-height: 1.35;
  }
  body.dark-mode .tu-reco .product-card .product-link h4 { color: var(--tu-fg, #FFFFFF); }
  .tu-reco .product-card .product-link .product-price {
    font-size: 14.5px;
    font-weight: 900;
    margin: 0 16px 16px;
    text-align: left;
    /* gradient signature Tropical Urban */
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 50%, #D4A82E 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.01em;
  }
  /* Fallback si background-clip: text non supporté */
  @supports not (-webkit-background-clip: text) {
    .tu-reco .product-card .product-link .product-price {
      color: var(--tu-accent-text, #1E8449);
      -webkit-text-fill-color: initial;
    }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px) {
    .tu-reco { margin: 40px auto 24px; padding: 28px 14px 22px; border-radius: 18px; }
    .tu-reco--outfit { padding: 32px 16px 26px; }
    .tu-reco--outfit::before { left: 14px; right: 14px; }
    .tu-reco-head { margin-bottom: 18px; }
    .tu-reco .product-card .product-link h4 { font-size: 13.5px; margin: 12px 12px 4px; }
    .tu-reco .product-card .product-link .product-price { font-size: 14px; margin: 0 12px 14px; }
  }
  @media (max-width: 560px) {
    .tu-reco { margin: 32px auto 20px; padding: 24px 12px 20px; }
    .tu-reco--outfit { padding: 28px 14px 22px; }
    .tu-reco-head { margin-bottom: 16px; }
    .tu-reco-head h2 { font-size: 20px; }
    .tu-reco-intro { font-size: 13px; }
    .tu-reco-eyebrow { font-size: 10px; letter-spacing: .2em; padding: 4px 12px; }
    /* Sur mobile, badges toujours visibles (pas de hover) pour ne pas perdre le signal commercial */
    .tu-reco--suggest .product-card::after,
    .tu-reco--outfit .product-card::after {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* Accessibilité : pas d'animation si l'utilisateur le demande */
  @media (prefers-reduced-motion: reduce) {
    .tu-reco .product-card .product-link,
    .tu-reco .product-card .product-thumb,
    .tu-reco .product-card::after,
    .tu-reco-eyebrow-dot {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════
     OUTFIT BOARD — "Complétez votre tenue" V2
     -----------------------------------------------------------------
     Transformation en vrai board de composition outfit :
     - bandeau narratif supérieur avec chips "pièces" + total agrégé
     - numérotation visuelle (I · II · III · IV) sur chaque carte
     - ligne pointillée reliant les cartes (métaphore "outfit composition")
     - CTA global "Voir le look complet · [TOTAL] €"
     Aucune modification du JS — les éléments sont purement CSS/HTML
     et alimentés par un petit hook non-invasif qui lit les prix déjà
     rendus par premiumRenderCrossSell (variable currentProduct préservée).
     ═══════════════════════════════════════════════════════════════════ */

  /* Bandeau narratif au-dessus de la grille outfit */
  .tu-outfit-board {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 auto 26px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg,
      rgba(46, 204, 113, .08) 0%,
      rgba(212, 168, 46, .06) 100%),
      rgba(255, 255, 255, .55);
    border: 1px solid rgba(46, 204, 113, .22);
    box-shadow: 0 2px 8px rgba(44, 62, 80, .04);
    backdrop-filter: blur(6px);
  }
  body.dark-mode .tu-outfit-board {
    background: linear-gradient(135deg,
      rgba(46, 204, 113, .14) 0%,
      rgba(212, 168, 46, .08) 100%),
      rgba(255, 255, 255, .03);
    border-color: rgba(46, 204, 113, .26);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .30);
  }
  .tu-outfit-board-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--tu-accent-text, #1E8449);
  }
  .tu-outfit-board-label::before {
    content: "";
    display: inline-flex;
    width: 18px; height: 18px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 35%, #fff 0 3px, transparent 4px),
      linear-gradient(135deg, var(--primary-color, #2ECC71), #D4A82E);
    box-shadow: 0 2px 6px rgba(46, 204, 113, .30);
    flex: 0 0 auto;
  }
  .tu-outfit-board-pieces {
    flex: 1 1 auto;
    display: flex; flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
  }
  .tu-outfit-board-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(44, 62, 80, .06);
    color: var(--tu-fg-soft, #5A6C7B);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid rgba(44, 62, 80, .08);
    white-space: nowrap;
  }
  body.dark-mode .tu-outfit-board-chip {
    background: rgba(255, 255, 255, .05);
    color: var(--tu-fg-soft, #B8B8B8);
    border-color: rgba(255, 255, 255, .08);
  }
  .tu-outfit-board-chip--highlight {
    background: linear-gradient(135deg, rgba(46, 204, 113, .14), rgba(39, 174, 96, .08));
    color: var(--tu-accent-text, #1E8449);
    border-color: rgba(46, 204, 113, .28);
  }
  /* Petite pastille catégorie en préfixe des chips (point coloré) */
  .tu-outfit-board-chip-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary-color, #2ECC71);
    opacity: .85;
    flex: 0 0 auto;
  }
  /* État "aucune pièce" : message simple et neutre */
  .tu-outfit-board-empty {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tu-muted, #7F8C8D);
    font-style: italic;
  }
  .tu-outfit-board-total {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    gap: 1px; flex: 0 0 auto;
  }
  .tu-outfit-board-total-label {
    font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--tu-muted, #7F8C8D);
  }
  .tu-outfit-board-total-value {
    font-size: 17px; font-weight: 900;
    letter-spacing: -.01em;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 50%, #D4A82E 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @supports not (-webkit-background-clip: text) {
    .tu-outfit-board-total-value {
      color: var(--tu-accent-text, #1E8449);
      -webkit-text-fill-color: initial;
    }
  }

  /* Numérotation I · II · III · IV sur chaque carte outfit */
  .tu-reco--outfit .product-card::before {
    position: absolute;
    bottom: 12px; left: 12px;
    z-index: 2;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.01em;
    color: #FFFFFF;
    background: rgba(26, 58, 82, .92);
    border: 1.5px solid rgba(255, 255, 255, .6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .24);
    pointer-events: none;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .tu-reco--outfit .product-card:nth-child(1)::before { content: "I"; }
  .tu-reco--outfit .product-card:nth-child(2)::before { content: "II"; }
  .tu-reco--outfit .product-card:nth-child(3)::before { content: "III"; }
  .tu-reco--outfit .product-card:nth-child(4)::before { content: "IV"; }
  .tu-reco--outfit .product-card:hover::before {
    transform: scale(1.08) rotate(-3deg);
  }
  body.dark-mode .tu-reco--outfit .product-card::before {
    background: rgba(255, 255, 255, .92);
    color: #0A1A25;
    border-color: rgba(0, 0, 0, .22);
  }

  /* CTA agrégateur en bas de section outfit */
  .tu-outfit-cta {
    margin: 26px auto 0;
    padding: 18px 22px;
    border-radius: 16px;
    background:
      radial-gradient(80% 100% at 0% 50%, rgba(46, 204, 113, .12), transparent 60%),
      linear-gradient(135deg, var(--tu-surface, #FFFFFF) 0%, rgba(46, 204, 113, .04) 100%);
    border: 1px solid rgba(46, 204, 113, .22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 18px rgba(46, 204, 113, .08);
  }
  body.dark-mode .tu-outfit-cta {
    background:
      radial-gradient(80% 100% at 0% 50%, rgba(46, 204, 113, .14), transparent 60%),
      linear-gradient(135deg, var(--tu-surface, #1E1E1E) 0%, rgba(46, 204, 113, .06) 100%);
    border-color: rgba(46, 204, 113, .26);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .40);
  }
  .tu-outfit-cta-title {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1 1 auto; min-width: 0;
  }
  .tu-outfit-cta-kicker {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .20em; text-transform: uppercase;
    color: var(--tu-accent-text, #1E8449);
  }
  .tu-outfit-cta-main {
    font-size: 16px;
    font-weight: 800;
    color: var(--tu-fg, #2C3E50);
    letter-spacing: -.01em;
    line-height: 1.3;
  }
  body.dark-mode .tu-outfit-cta-main { color: var(--tu-fg, #FFFFFF); }
  .tu-outfit-cta-sub {
    font-size: 12.5px;
    color: var(--tu-fg-soft, #5A6C7B);
    line-height: 1.4;
  }
  .tu-outfit-cta-amount {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    flex: 0 0 auto;
    gap: 1px;
  }
  .tu-outfit-cta-amount-label {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--tu-muted, #7F8C8D);
  }
  .tu-outfit-cta-amount-value {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.015em;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 50%, #D4A82E 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @supports not (-webkit-background-clip: text) {
    .tu-outfit-cta-amount-value {
      color: var(--tu-accent-text, #1E8449);
      -webkit-text-fill-color: initial;
    }
  }

  /* Hide the outfit enhancement blocks until JS populates them
     (avoids a flash of empty skeleton if crosssell section is hidden). */
  #crosssell-section .tu-outfit-board,
  #crosssell-section .tu-outfit-cta {
    opacity: 0;
    transition: opacity .28s ease;
  }
  #crosssell-section.tu-outfit-ready .tu-outfit-board,
  #crosssell-section.tu-outfit-ready .tu-outfit-cta {
    opacity: 1;
  }

  /* ═══════════════════════════════════════════════════════════════════
     SUGGEST : numérotation romaine très discrète (I · II · III · IV)
     Accent éditorial "sélection curatoriale". Invisible sur les badges,
     se dévoile au survol pour rester léger.
     ═══════════════════════════════════════════════════════════════════ */
  .tu-reco--suggest .product-card {
    counter-increment: tu-suggest;
  }
  .tu-reco--suggest .products-grid {
    counter-reset: tu-suggest;
  }
  .tu-reco--suggest .product-card .product-link::before {
    content: counter(tu-suggest, upper-roman);
    position: absolute;
    bottom: 12px; right: 12px;
    z-index: 2;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(44, 62, 80, .28);
    transition: color .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .tu-reco--suggest .product-card:hover .product-link::before {
    color: var(--tu-accent-text, #1E8449);
    transform: scale(1.1);
  }
  body.dark-mode .tu-reco--suggest .product-card .product-link::before {
    color: rgba(255, 255, 255, .24);
  }
  body.dark-mode .tu-reco--suggest .product-card:hover .product-link::before {
    color: var(--tu-accent-text, #4ADE80);
  }
  .tu-reco--suggest .product-card .product-link {
    position: relative;
  }

  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE OUTFIT BOARD + CTA
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width: 760px) {
    .tu-outfit-board {
      padding: 12px 14px;
      gap: 10px;
    }
    .tu-outfit-board-label { font-size: 11px; letter-spacing: .14em; }
    .tu-outfit-board-label::before { width: 16px; height: 16px; }
    .tu-outfit-board-chip { font-size: 11px; padding: 3px 9px; }
    .tu-outfit-board-total { width: 100%; align-items: flex-start; }
    .tu-outfit-board-total-value { font-size: 16px; }

    .tu-outfit-cta {
      padding: 16px 18px;
      gap: 10px;
    }
    .tu-outfit-cta-main { font-size: 15px; }
    .tu-outfit-cta-amount { width: 100%; align-items: flex-start; padding-top: 2px; border-top: 1px dashed rgba(46, 204, 113, .22); }
    .tu-outfit-cta-amount-value { font-size: 20px; }

    /* Numéros plus petits et en bas-gauche, pareil */
    .tu-reco--outfit .product-card::before {
      width: 24px; height: 24px; font-size: 11px;
      bottom: 10px; left: 10px;
    }
    .tu-reco--suggest .product-card .product-link::before {
      font-size: 12px; bottom: 10px; right: 10px;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════
     V3 — INTERACTIVITÉ PREMIUM
     -----------------------------------------------------------------
     • Chips outfit = toggles aria-pressed (on / off)
     • Cartes outfit : anneau + cocher visible quand sélectionnées
     • Suggest : badges intelligents (Populaire / Tendance / Nouveau)
       + quick-add "+"
     • Hover zoom/glow discret
     • CTA action bouton (état idle / prêt / success / loading)
     • Scroll horizontal snap mobile sur les deux rangées
     Tous scopés sous .tu-reco ou #crosssell-section pour éviter toute
     fuite sur d'autres pages.
     ═══════════════════════════════════════════════════════════════════ */

  /* ——— Chips outfit interactifs ——— */
  .tu-outfit-board-chip {
    cursor: pointer;
    user-select: none;
    transition:
      background-color .22s ease,
      color .22s ease,
      border-color .22s ease,
      transform .18s ease,
      box-shadow .22s ease;
  }
  .tu-outfit-board-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(44, 62, 80, .10);
  }
  .tu-outfit-board-chip:focus-visible {
    outline: 2px solid rgba(46, 204, 113, .55);
    outline-offset: 2px;
  }
  .tu-outfit-board-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(46, 204, 113, .20), rgba(39, 174, 96, .12));
    color: var(--tu-accent-text, #1E8449);
    border-color: rgba(46, 204, 113, .48);
    box-shadow: 0 4px 12px rgba(46, 204, 113, .20);
  }
  .tu-outfit-board-chip[aria-pressed="true"] .tu-outfit-board-chip-dot {
    background: var(--primary-color, #2ECC71);
    opacity: 1;
    transform: scale(1.2);
  }
  body.dark-mode .tu-outfit-board-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(46, 204, 113, .28), rgba(39, 174, 96, .16));
    color: #B8F5C8;
    border-color: rgba(46, 204, 113, .55);
  }

  /* ——— Cartes outfit sélectionnées : anneau vert + coche ——— */
  .tu-reco--outfit .product-card {
    transition: transform .3s cubic-bezier(.2,.8,.2,1),
                box-shadow .3s ease,
                outline-color .25s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
  }
  .tu-reco--outfit .product-card.tu-outfit-card--selected {
    outline-color: var(--primary-color, #2ECC71);
    box-shadow: 0 14px 32px rgba(46, 204, 113, .22);
  }
  .tu-reco--outfit .product-card.tu-outfit-card--selected::after {
    /* Remplace le "✦ Associer" existant par "✓ Sélectionné" */
    content: "✓ Sélectionné";
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: linear-gradient(135deg, #27AE60, #229954) !important;
  }
  .tu-reco--outfit .product-card.tu-outfit-card--selected .product-thumb {
    filter: saturate(1.05) brightness(1.02);
  }

  /* ——— Hover zoom + glow (suggest + outfit) ——— */
  .tu-reco .product-card .product-thumb {
    transition: transform .5s cubic-bezier(.2,.8,.2,1),
                filter .35s ease;
  }
  .tu-reco .product-card:hover .product-thumb {
    transform: scale(1.05);
  }
  .tu-reco--suggest .product-card:hover {
    box-shadow: 0 18px 40px rgba(46, 204, 113, .12),
                0 4px 12px rgba(44, 62, 80, .06);
  }
  body.dark-mode .tu-reco--suggest .product-card:hover {
    box-shadow: 0 18px 42px rgba(46, 204, 113, .22),
                0 4px 14px rgba(0, 0, 0, .45);
  }

  /* ═══════════════════════════════════════════════════════════════════
     BADGE STACK — zone top-left dédiée aux badges de carte reco
     -----------------------------------------------------------------
     CAUSE RACINE corrigée ici : `.product-card { overflow: hidden }` défini
     globalement dans css/style.css clipait tout élément débordant de la
     carte (ruban "Recommandé" à top négatif, glow à inset négatif).
     Override SCOPÉ aux blocs reco → la carte ne clippe plus ses enfants.
     L'arrondi image reste préservé par `.product-link { overflow:hidden;
     border-radius:12px }` (couche interne intacte, aucune régression).

     • Wrapper .tu-badge-stack en top-left, flex column gap, réserve
       une marge droite de 56px pour ne jamais empiéter sur le bouton rond.
     • Smart badges ET ruban "Recommandé" injectés DANS le stack en
       position: static → 100% contenus dans la carte.
     • Plusieurs badges stackent naturellement verticalement.
     • Max-width de chaque badge = 100% du stack → jamais coupé ni bleed.
     • Le ::after décoratif des cartes outfit (redondant avec l'état
       du bouton rond + l'anneau de sélection) est désactivé dans les
       grids tu-selectable.
     ═══════════════════════════════════════════════════════════════════ */

  /* Override ciblé du clipping : SEULE correction capable de résoudre
     durablement le rognage des badges + du glow. Scopé aux reco. */
  .tu-reco .product-card {
    overflow: visible;
  }

  .tu-reco .product-card .tu-badge-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 56px;              /* zone bouton rond top-right (34 + 12 gap) */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 68px);
  }

  /* ——— Smart badges ——— */
  .tu-smart-badge {
    /* Defaults si posé HORS stack (backward compat) : top-left absolute */
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    /* Apparence */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    min-height: 24px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(44, 62, 80, .85);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    box-shadow:
      0 6px 14px rgba(0, 0, 0, .24),
      0 1px 2px rgba(0, 0, 0, .10);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
    pointer-events: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* À l'intérieur du stack : reset le positionnement absolu pour que
     flex prenne le relais. Les badges stackent verticalement avec gap. */
  .tu-reco .product-card .tu-badge-stack > .tu-smart-badge {
    position: static;
    top: auto;
    left: auto;
  }
  .tu-smart-badge--populaire {
    background: linear-gradient(135deg, #D4A82E, #D35400);
  }
  .tu-smart-badge--tendance {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
  }
  .tu-smart-badge--nouveau {
    background: linear-gradient(135deg, #3498DB, #2874A6);
  }
  .tu-smart-badge .tu-smart-badge-dot {
    flex: 0 0 auto;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
  }
  /* Quand la carte porte un smart badge, on masque le "Sélection" hover
     des cartes suggest pour éviter le conflit top-left. */
  .tu-reco--suggest .product-card.has-smart-badge::after {
    display: none;
  }
  /* Sur les grids selectable (select-btn présent), le ::after décoratif
     outfit ("✦ Associer" / "✓ Sélectionné") est redondant avec l'état
     du bouton + l'anneau de sélection + le ruban. On le retire pour libérer
     la zone top-right au bouton. (Les grids non-selectable — future
     régression improbable — conservent le badge d'origine.) */
  .tu-reco--outfit .tu-selectable .product-card::after {
    display: none;
  }

  /* Responsive mobile : stack plus compact, pas de chevauchement */
  @media (max-width: 600px) {
    .tu-reco .product-card .tu-badge-stack {
      top: 10px;
      left: 10px;
      right: 52px;            /* button mobile = 32 + 12 + 8 margin */
      gap: 5px;
      max-width: calc(100% - 62px);
    }
    .tu-smart-badge {
      padding: 4px 10px;
      min-height: 22px;
      font-size: 10px;
      letter-spacing: .12em;
    }
  }

  /* Dark mode : légère adaptation du glow + bord plus net */
  body.dark-mode .tu-smart-badge {
    border-color: rgba(255, 255, 255, .28);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, .50),
      0 1px 2px rgba(0, 0, 0, .28);
  }

  /* ——— Quick-add button (suggest uniquement) ——— */
  .tu-quick-add {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--tu-surface, #FFFFFF);
    color: var(--tu-fg, #2C3E50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(44, 62, 80, .18);
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    transition: opacity .22s ease,
                transform .22s cubic-bezier(.2,.8,.2,1),
                background-color .2s ease,
                color .2s ease;
  }
  .tu-quick-add svg {
    width: 18px; height: 18px;
    stroke-width: 2.4;
  }
  .tu-reco--suggest .product-card:hover .tu-quick-add,
  .tu-quick-add:focus-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .tu-quick-add:hover {
    background: var(--primary-color, #2ECC71);
    color: #FFFFFF;
    transform: scale(1.08);
  }
  .tu-quick-add:focus-visible {
    outline: 2px solid rgba(46, 204, 113, .55);
    outline-offset: 2px;
  }
  body.dark-mode .tu-quick-add {
    background: rgba(30, 30, 30, .95);
    color: #FFFFFF;
  }
  .tu-quick-add.is-added {
    background: var(--primary-color, #2ECC71);
    color: #FFFFFF;
    animation: tu-qa-pop .45s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes tu-qa-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.25); }
    100% { transform: scale(1); }
  }

  /* ——— Carte : flash "ajouté" ——— */
  .product-card.tu-added-flash {
    animation: tu-card-flash .8s ease;
  }
  @keyframes tu-card-flash {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .0); }
    30%  { box-shadow: 0 0 0 6px rgba(46, 204, 113, .35); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
  }

  /* ═══════════════════════════════════════════════════════════════════
     CTA ACTION BUTTON — "Ajouter le look sélectionné"
     ═══════════════════════════════════════════════════════════════════ */
  .tu-outfit-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 16px;
    border: 1.5px solid rgba(46, 204, 113, .35);
    border-radius: 14px;
    background: linear-gradient(135deg,
      rgba(46, 204, 113, .10) 0%,
      rgba(212, 168, 46, .06) 100%),
      var(--tu-surface, #FFFFFF);
    color: var(--tu-fg, #2C3E50);
    font: inherit;
    cursor: pointer;
    transition:
      transform .2s cubic-bezier(.2,.8,.2,1),
      box-shadow .25s ease,
      background-color .25s ease,
      border-color .25s ease,
      opacity .25s ease;
    flex: 0 0 auto;
    min-width: 220px;
  }
  .tu-outfit-cta-action:hover:not([disabled]) {
    transform: translateY(-1px);
    border-color: rgba(46, 204, 113, .60);
    box-shadow: 0 10px 24px rgba(46, 204, 113, .22);
  }
  .tu-outfit-cta-action:active:not([disabled]) {
    transform: translateY(0);
  }
  .tu-outfit-cta-action[disabled] {
    opacity: .70;
    cursor: not-allowed;
    background: rgba(44, 62, 80, .04);
    border-color: rgba(44, 62, 80, .12);
    color: var(--tu-muted, #7F8C8D);
  }
  body.dark-mode .tu-outfit-cta-action {
    background: linear-gradient(135deg,
      rgba(46, 204, 113, .14) 0%,
      rgba(212, 168, 46, .08) 100%),
      var(--tu-surface, #1E1E1E);
    color: var(--tu-fg, #FFFFFF);
    border-color: rgba(46, 204, 113, .40);
  }
  body.dark-mode .tu-outfit-cta-action[disabled] {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: var(--tu-muted, #7F8C8D);
  }
  .tu-outfit-cta-action-price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding-right: 14px;
    border-right: 1px dashed rgba(46, 204, 113, .28);
    flex: 0 0 auto;
  }
  .tu-outfit-cta-action[disabled] .tu-outfit-cta-action-price {
    border-right-color: rgba(44, 62, 80, .18);
  }
  .tu-outfit-cta-action-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    color: var(--tu-accent-text, #1E8449);
    flex: 1 1 auto;
    white-space: nowrap;
  }
  .tu-outfit-cta-action[disabled] .tu-outfit-cta-action-text {
    color: var(--tu-muted, #7F8C8D);
  }
  .tu-outfit-cta-action-icon {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    transition: transform .25s ease;
  }
  .tu-outfit-cta-action:hover:not([disabled]) .tu-outfit-cta-action-icon {
    transform: translateX(2px);
  }
  body.dark-mode .tu-outfit-cta-action-text {
    color: #4ADE80;
  }

  /* États spéciaux : loading + success */
  .tu-outfit-cta-action.is-loading {
    pointer-events: none;
    position: relative;
  }
  .tu-outfit-cta-action.is-loading .tu-outfit-cta-action-icon {
    animation: tu-cta-spin .9s linear infinite;
  }
  @keyframes tu-cta-spin {
    to { transform: rotate(360deg); }
  }
  .tu-outfit-cta-action.is-success {
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    color: #FFFFFF;
    border-color: rgba(46, 204, 113, .80);
    box-shadow: 0 12px 28px rgba(46, 204, 113, .30);
    animation: tu-cta-success-pulse .7s ease;
  }
  .tu-outfit-cta-action.is-success .tu-outfit-cta-action-text,
  .tu-outfit-cta-action.is-success .tu-outfit-cta-amount-label,
  .tu-outfit-cta-action.is-success .tu-outfit-cta-amount-value {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
  }
  .tu-outfit-cta-action.is-success .tu-outfit-cta-action-price {
    border-right-color: rgba(255, 255, 255, .45);
  }
  @keyframes tu-cta-success-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }

  /* Responsive CTA */
  @media (max-width: 560px) {
    .tu-outfit-cta-action {
      width: 100%;
      justify-content: space-between;
      min-width: 0;
    }
    .tu-outfit-cta-action-text { font-size: 12px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     MOBILE — scroll horizontal snap pour les deux rangées
     Transforme la grid en carousel sur ≤600px sans toucher au JS ni
     au DOM. scroll-snap + touch-action fluide.
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width: 600px) {
    .tu-reco .products-grid {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 78%;
      grid-template-columns: unset;
      gap: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding: 4px 4px 14px;
      /* Scrollbar discrète */
      scrollbar-width: thin;
      scrollbar-color: rgba(46, 204, 113, .35) transparent;
    }
    .tu-reco .products-grid::-webkit-scrollbar { height: 4px; }
    .tu-reco .products-grid::-webkit-scrollbar-thumb {
      background: rgba(46, 204, 113, .35);
      border-radius: 999px;
    }
    .tu-reco .products-grid .product-card {
      scroll-snap-align: start;
      min-width: 0;
    }
    /* Le compact-grid se comporte comme le snap standard */
    .tu-reco .products-grid.compact-grid {
      grid-auto-columns: 78%;
      grid-template-columns: unset;
      justify-content: unset;
    }
    /* On retire le :nth-child romain (I,II,III,IV) car l'ordre snap
       n'est plus stable visuellement — le chip catégorie dans le board
       reste la source de vérité. */
    .tu-reco--outfit .product-card::before { display: none; }
  }

  /* Tablet intermédiaire : 2 cartes par rangée visibles */
  @media (max-width: 900px) and (min-width: 601px) {
    .tu-reco .products-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ═══════════════════════════════════════════════════════════════════
     CTA bulk-add pour la section suggest ("Dans le même univers")
     Réutilise .tu-outfit-cta / .tu-outfit-cta-action mais avec un
     background plus sobre (pas d'accent orange, on garde l'univers
     "découverte" vs "styling" du bloc outfit).
     ═══════════════════════════════════════════════════════════════════ */
  .tu-suggest-cta {
    margin: 26px auto 0;
    background:
      radial-gradient(70% 80% at 0% 50%, rgba(52, 152, 219, .08), transparent 60%),
      linear-gradient(135deg, var(--tu-surface, #FFFFFF) 0%, rgba(52, 152, 219, .04) 100%);
    border-color: rgba(52, 152, 219, .20);
    box-shadow: 0 6px 18px rgba(52, 152, 219, .08);
  }
  body.dark-mode .tu-suggest-cta {
    background:
      radial-gradient(70% 80% at 0% 50%, rgba(52, 152, 219, .14), transparent 60%),
      linear-gradient(135deg, var(--tu-surface, #1E1E1E) 0%, rgba(52, 152, 219, .08) 100%);
    border-color: rgba(52, 152, 219, .28);
  }
  .tu-suggest-cta .tu-outfit-cta-kicker { color: #2874A6; }
  body.dark-mode .tu-suggest-cta .tu-outfit-cta-kicker { color: #4DABE6; }

  /* Sur cartes sélectionnées, on fait reculer les badges
     décoratifs pour éviter les superpositions avec le bouton. */
  .tu-reco--outfit .product-card.tu-outfit-card--selected::after { opacity: 1 !important; }
  /* Le quick-add legacy (obsolète) est masqué si jamais il subsiste */
  .tu-reco .product-card .tu-quick-add { display: none !important; }

  /* ═══════════════════════════════════════════════════════════════════
     V4 — ANIMATIONS PREMIUM
     -----------------------------------------------------------------
     • Sélection : scale + glow progressif (transform + opacity)
     • Pulse réactif sur toggle (micro-feedback tactile)
     • Tumble du prix / compteur (animation du chiffre)
     • Pré-sélection : ruban "✨ Recommandé"
     • Psych triggers : smart badges enrichis 🔥⚡💡🌴
     • Sticky mobile reco CTA : slide-up, agrège les 2 blocs
     Perf : uniquement transform + opacity. will-change ciblé.
     Respecte prefers-reduced-motion.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── 1. Sélection : scale carte + glow via élément dédié ─────────
     On utilise un wrapper radial (.tu-select-glow) plutôt que box-shadow
     animé sur la carte. L'ombre est définie en dur (paint once) ; on
     n'anime que opacity + transform → GPU-friendly. */
  .tu-reco .product-card {
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .tu-reco .product-card.tu-selected,
  .tu-reco .product-card.tu-outfit-card--selected {
    transform: scale(1.025);
  }
  .tu-reco .product-card .tu-select-glow {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow:
      0 0 0 2px rgba(46, 204, 113, .45),
      0 16px 42px rgba(46, 204, 113, .32),
      0 2px 10px rgba(39, 174, 96, .18);
    z-index: 0;
  }
  .tu-reco .product-card.tu-selected .tu-select-glow,
  .tu-reco .product-card.tu-outfit-card--selected .tu-select-glow {
    opacity: 1;
    transform: scale(1);
  }
  /* Retire l'outline précédent (V1) quand le glow est en place. */
  .tu-selectable .product-card.tu-selected,
  .tu-selectable .product-card.tu-outfit-card--selected {
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* ── 2. Pulse réactif sur la carte + le bouton au toggle ────────
     Rejoué à chaque clic via ajout/retrait de classe (JS fait un
     reflow pour relancer l'animation). Uniquement transform. */
  @keyframes tu-card-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.045); }
    100% { transform: scale(1.025); }
  }
  .tu-reco .product-card.tu-select-flash.tu-selected,
  .tu-reco .product-card.tu-select-flash.tu-outfit-card--selected {
    animation: tu-card-pulse .30s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes tu-card-unpulse {
    0%   { transform: scale(1.025); }
    100% { transform: scale(1); }
  }
  .tu-reco .product-card.tu-select-flash:not(.tu-selected):not(.tu-outfit-card--selected) {
    animation: tu-card-unpulse .22s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes tu-selbtn-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
  }
  .tu-select-btn.tu-select-btn-pulse {
    animation: tu-selbtn-pulse .32s cubic-bezier(.2,.8,.2,1);
  }

  /* Entrance plus riche du check à l'intérieur du bouton */
  .tu-select-btn svg {
    transform: scale(.55) rotate(-12deg);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1.35);
  }
  .tu-select-btn[aria-pressed="true"] svg {
    transform: scale(1) rotate(0deg);
  }

  /* ── 3. Tumble prix / compteur ───────────────────────────────── */
  @keyframes tu-number-tumble {
    0%   { transform: translateY(0)    scale(1);    opacity: 1; }
    30%  { transform: translateY(-2px) scale(1.06); opacity: .85; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
  }
  .tu-outfit-board-total-value,
  .tu-outfit-cta-amount-value,
  .tu-sticky-reco-total-value {
    display: inline-block;
    transform-origin: right center;
    will-change: transform, opacity;
  }
  .tu-outfit-board-total-value.is-tumbling,
  .tu-outfit-cta-amount-value.is-tumbling,
  .tu-sticky-reco-total-value.is-tumbling,
  .tu-outfit-board-label.is-tumbling,
  .tu-sticky-reco-count.is-tumbling {
    animation: tu-number-tumble .38s cubic-bezier(.2,.8,.2,1);
  }

  /* ── 4. Ruban "✨ Recommandé" — injecté DANS le stack ───────────
     Désormais le ruban est un item du stack (position: static), avec
     un fade-in à la pose et une mise en avant visuelle (gradient doré).
     Les règles d'origine (position absolute top: -12px) restent en
     base CSS comme fallback si jamais un ruban est posé HORS stack. */
  .tu-preselected-badge {
    /* Base fallback : si posé au top-level de la carte (legacy) */
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: 6;
    transform: translateX(-50%) translateY(-4px);
    opacity: 0;
    /* Apparence commune (fallback + stack) */
    padding: 5px 14px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #F1C40F 0%, #D4A82E 100%);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow:
      0 10px 24px rgba(212, 168, 46, .42),
      0 2px 6px rgba(0, 0, 0, .14);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .tu-preselected-badge.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .tu-preselected-badge::before {
    content: "✨";
    margin-right: 5px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
  }
  body.dark-mode .tu-preselected-badge {
    border-color: rgba(255, 255, 255, .36);
    box-shadow:
      0 10px 24px rgba(212, 168, 46, .55),
      0 2px 6px rgba(0, 0, 0, .38);
  }
  /* Mode primaire : DANS le stack → flow flex statique, fade-in vertical
     uniquement (plus de translateX). Le ruban devient le 1er item stack. */
  .tu-reco .product-card .tu-badge-stack > .tu-preselected-badge {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    transform: translateY(-4px);
    letter-spacing: .18em;
  }
  .tu-reco .product-card .tu-badge-stack > .tu-preselected-badge.is-visible {
    transform: translateY(0);
  }
  @media (max-width: 600px) {
    .tu-preselected-badge {
      padding: 4px 12px;
      font-size: 9.5px;
      letter-spacing: .16em;
    }
  }

  /* ── 5. Psych triggers : smart badges enrichis (emoji) ────────
     Garde les variantes --match et --tropical + l'emoji en prefix.
     Rendu cohérent avec le reste du système .tu-smart-badge. */
  .tu-smart-badge .tu-smart-badge-emoji {
    display: inline-block;
    margin-right: 4px;
    font-size: 12px;
    line-height: 1;
    transform: translateY(-.5px);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22));
  }
  .tu-smart-badge--match {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
  }
  .tu-smart-badge--tropical {
    background: linear-gradient(135deg, #16A085, #27AE60);
  }

  /* ── 6. STICKY mobile reco CTA ─────────────────────────────── */
  .tu-sticky-reco {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 55%, #229954 100%);
    color: #FFFFFF;
    box-shadow:
      0 14px 34px rgba(46, 204, 113, .38),
      0 4px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(calc(100% + 40px));
    transition:
      transform .38s cubic-bezier(.2, .8, .2, 1),
      opacity .25s ease;
    will-change: transform, opacity;
    pointer-events: none;
  }
  .tu-sticky-reco.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .tu-sticky-reco-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .tu-sticky-reco-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
  }
  .tu-sticky-reco-total {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.1;
  }
  .tu-sticky-reco-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition:
      transform .22s cubic-bezier(.2, .8, .2, 1),
      background-color .2s ease,
      border-color .2s ease;
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }
  .tu-sticky-reco-btn:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
  }
  .tu-sticky-reco-btn:active { transform: scale(.98); }
  .tu-sticky-reco-btn svg { width: 14px; height: 14px; stroke-width: 2.6; }
  .tu-sticky-reco.is-loading .tu-sticky-reco-btn svg {
    animation: tu-cta-spin .9s linear infinite;
  }
  .tu-sticky-reco.is-success {
    background: linear-gradient(135deg, #1E8449 0%, #27AE60 100%);
    animation: tu-cta-success-pulse .7s ease;
  }
  @media (min-width: 901px) {
    .tu-sticky-reco { display: none !important; }
  }
  body.tu-has-reco-sticky #sticky-mobile-bar {
    transform: translateY(calc(100% + 30px)) !important;
    opacity: 0 !important;
    transition:
      transform .3s cubic-bezier(.2, .8, .2, 1),
      opacity .2s ease !important;
  }

  /* ── 7. prefers-reduced-motion : coupe les anim non essentielles ─ */
  @media (prefers-reduced-motion: reduce) {
    .tu-reco .product-card,
    .tu-reco .product-card .tu-select-glow,
    .tu-select-btn svg,
    .tu-outfit-board-total-value,
    .tu-outfit-cta-amount-value,
    .tu-sticky-reco {
      transition: opacity .2s ease !important;
      animation: none !important;
    }
    .tu-reco .product-card.tu-selected,
    .tu-reco .product-card.tu-outfit-card--selected { transform: none !important; }
    .tu-preselected-badge {
      transition: opacity .2s ease !important;
      transform: translateX(-50%) !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     LIGHT / DARK MODE — produit-detail.html
     Couche additive scopée à .product-detail-page + .product-tabs-section,
     basée sur des tokens --pd-* qui basculent au switch de thème.

     Mécanisme thème détecté (audit global.js) :
       - source de vérité = body.dark-mode (toggle main.js / bouton lune)
       - mirroré sur html.dark + html[data-tu-theme="dark"] (MutationObserver)
       - localStorage keys : 'theme' | 'siteTheme' | 'darkMode'
     → On accepte les 3 sélecteurs (body.dark-mode, html.dark,
       html[data-tu-theme="dark"]) pour résister à tout chemin de boot.

     Stratégie :
       1. Tokens light définis sur .product-detail-page (no-op visuel : couleurs
          identiques à l'existant, juste centralisées).
       2. Tokens dark redéfinis dans le bloc dark-mode (rgba blanc + accents).
       3. Sélecteurs spécifiques (1,2,0+) avec !important sur les éléments
          historiquement codés en couleurs dures (#888, #333, #111…).
       4. Service cards = .reassurance-block / .reassurance-item (les "service
          cards" mentionnées par le user → cards de réassurance livraison/retours/
          paiement/SAV) reçoivent un vrai background dark cohérent.

     Aucune modification de style.css ni produit-detail.css : impact global évité.
     Mode clair 100 % préservé (les tokens light reproduisent l'aspect actuel).
     ════════════════════════════════════════════════════════════════════ */

  /* ── TOKENS LIGHT (default) ──────────────────────────────────────── */
  .product-detail-page,
  .product-tabs-section {
    --pd-bg:           #f8fafc;
    --pd-surface:      #ffffff;
    --pd-surface-soft: rgba(255,255,255,0.82);
    --pd-card:         #ffffff;
    --pd-card-hover:   #f9f9f9;

    --pd-heading:      #102033;
    --pd-text:         #132033;
    --pd-soft:         rgba(19,32,51,0.78);
    --pd-muted:        rgba(19,32,51,0.62);
    --pd-subtle:       rgba(19,32,51,0.46);
    --pd-faint:        rgba(19,32,51,0.30);

    --pd-border:       rgba(19,32,51,0.12);
    --pd-border-strong:rgba(19,32,51,0.22);

    --pd-accent:       #1E8449;            /* vert tropical lisible sur blanc (AA) */
    --pd-accent-soft:  rgba(30,132,73,0.10);
    --pd-accent-line:  rgba(30,132,73,0.28);
    --pd-gold:         #b8860b;
    --pd-danger:       #e63946;
    --pd-warn-bg:      #fff3cd;
    --pd-warn-fg:      #856404;
    --pd-warn-line:    #ffc107;
  }

  /* ── TOKENS DARK ─ triple sélecteur (body.dark-mode | html.dark |
        html[data-tu-theme="dark"]) pour neutraliser tout chemin de boot ─ */
  body.dark-mode .product-detail-page,
  body.dark-mode .product-tabs-section,
  html.dark .product-detail-page,
  html.dark .product-tabs-section,
  html[data-tu-theme="dark"] .product-detail-page,
  html[data-tu-theme="dark"] .product-tabs-section {
    --pd-bg:           #050807;
    --pd-surface:      rgba(13,18,16,0.92);
    --pd-surface-soft: rgba(17,24,20,0.78);
    --pd-card:         rgba(15,23,20,0.92);  /* service cards dark cohérentes */
    --pd-card-hover:   rgba(22,32,28,0.95);

    --pd-heading:      #f8fafc;
    --pd-text:         rgba(255,255,255,0.92);
    --pd-soft:         rgba(255,255,255,0.78);
    --pd-muted:        rgba(255,255,255,0.66);
    --pd-subtle:       rgba(255,255,255,0.50);
    --pd-faint:        rgba(255,255,255,0.34);

    --pd-border:       rgba(255,255,255,0.12);
    --pd-border-strong:rgba(255,255,255,0.22);

    --pd-accent:       #5ED480;            /* vert tropical lisible sur dark */
    --pd-accent-soft:  rgba(46,204,113,0.16);
    --pd-accent-line:  rgba(46,204,113,0.40);
    --pd-gold:         #f0c860;
    --pd-danger:       #ff5670;
    --pd-warn-bg:      rgba(245,158,11,0.16);
    --pd-warn-fg:      #fbbf24;
    --pd-warn-line:    rgba(245,158,11,0.42);
  }

  /* ── SCOPE DARK : alias pour la suite (raccourci de lecture) ──────
        Toutes les règles ci-dessous utilisent le triple sélecteur via
        une déclaration de selector-list. !important sur color/background/
        border-color UNIQUEMENT là où une règle légère plus spécifique
        (ID + element) gagnait avant. */

  /* — BREADCRUMB — */
  body.dark-mode .product-detail-page .breadcrumb-nav,
  html.dark .product-detail-page .breadcrumb-nav,
  html[data-tu-theme="dark"] .product-detail-page .breadcrumb-nav {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-detail-page .breadcrumb-nav a,
  html.dark .product-detail-page .breadcrumb-nav a,
  html[data-tu-theme="dark"] .product-detail-page .breadcrumb-nav a {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-detail-page .breadcrumb-nav a:hover,
  html.dark .product-detail-page .breadcrumb-nav a:hover,
  html[data-tu-theme="dark"] .product-detail-page .breadcrumb-nav a:hover {
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .breadcrumb-nav span.sep,
  html.dark .product-detail-page .breadcrumb-nav span.sep,
  html[data-tu-theme="dark"] .product-detail-page .breadcrumb-nav span.sep {
    color: var(--pd-faint) !important;
  }
  body.dark-mode .product-detail-page .breadcrumb-nav span.current,
  html.dark .product-detail-page .breadcrumb-nav span.current,
  html[data-tu-theme="dark"] .product-detail-page .breadcrumb-nav span.current {
    color: var(--pd-heading) !important;
  }

  /* — TITRE PRODUIT — bat .product-info h1 { color: var(--text-color) } — */
  body.dark-mode .product-detail-page #product-name,
  body.dark-mode .product-detail-page .product-info h1,
  html.dark .product-detail-page #product-name,
  html.dark .product-detail-page .product-info h1,
  html[data-tu-theme="dark"] .product-detail-page #product-name,
  html[data-tu-theme="dark"] .product-detail-page .product-info h1 {
    color: var(--pd-heading) !important;
  }

  /* — PRIX (current vert / original barré muted) — */
  body.dark-mode .product-detail-page #current-price,
  body.dark-mode .product-detail-page .product-price .current-price,
  html.dark .product-detail-page #current-price,
  html.dark .product-detail-page .product-price .current-price,
  html[data-tu-theme="dark"] .product-detail-page #current-price,
  html[data-tu-theme="dark"] .product-detail-page .product-price .current-price {
    color: var(--pd-accent) !important;
  }
  body.dark-mode .product-detail-page #original-price,
  body.dark-mode .product-detail-page .product-price .original-price,
  html.dark .product-detail-page #original-price,
  html.dark .product-detail-page .product-price .original-price,
  html[data-tu-theme="dark"] .product-detail-page #original-price,
  html[data-tu-theme="dark"] .product-detail-page .product-price .original-price {
    color: var(--pd-subtle) !important;
  }

  /* — DELIVERY ESTIMATE / SOCIAL PROOF — */
  body.dark-mode .product-detail-page .delivery-estimate,
  body.dark-mode .product-detail-page .delivery-estimate i,
  html.dark .product-detail-page .delivery-estimate,
  html.dark .product-detail-page .delivery-estimate i,
  html[data-tu-theme="dark"] .product-detail-page .delivery-estimate,
  html[data-tu-theme="dark"] .product-detail-page .delivery-estimate i {
    color: var(--pd-accent) !important;
  }
  body.dark-mode .product-detail-page .delivery-estimate strong,
  html.dark .product-detail-page .delivery-estimate strong,
  html[data-tu-theme="dark"] .product-detail-page .delivery-estimate strong {
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .social-proof,
  html.dark .product-detail-page .social-proof,
  html[data-tu-theme="dark"] .product-detail-page .social-proof {
    color: var(--pd-danger) !important;
  }

  /* — DESCRIPTION COURTE — */
  body.dark-mode .product-detail-page #product-short-description,
  body.dark-mode .product-detail-page .product-description,
  html.dark .product-detail-page #product-short-description,
  html.dark .product-detail-page .product-description,
  html[data-tu-theme="dark"] .product-detail-page #product-short-description,
  html[data-tu-theme="dark"] .product-detail-page .product-description {
    color: var(--pd-soft) !important;
  }

  /* — LABELS Taille / Couleur (compense .option-group label avec
        var(--text-color) non défini → fallback inheritance instable) — */
  body.dark-mode .product-detail-page .option-group label,
  body.dark-mode .product-detail-page #size-options-group label,
  body.dark-mode .product-detail-page #color-options-group label,
  body.dark-mode .product-detail-page #selected-size-display,
  body.dark-mode .product-detail-page #selected-color-display,
  html.dark .product-detail-page .option-group label,
  html.dark .product-detail-page #size-options-group label,
  html.dark .product-detail-page #color-options-group label,
  html.dark .product-detail-page #selected-size-display,
  html.dark .product-detail-page #selected-color-display,
  html[data-tu-theme="dark"] .product-detail-page .option-group label,
  html[data-tu-theme="dark"] .product-detail-page #size-options-group label,
  html[data-tu-theme="dark"] .product-detail-page #color-options-group label,
  html[data-tu-theme="dark"] .product-detail-page #selected-size-display,
  html[data-tu-theme="dark"] .product-detail-page #selected-color-display {
    color: var(--pd-text) !important;
  }
  /* Lien Guide des tailles (subtilement souligné) */
  body.dark-mode .product-detail-page .size-guide-link,
  html.dark .product-detail-page .size-guide-link,
  html[data-tu-theme="dark"] .product-detail-page .size-guide-link {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-detail-page .size-guide-link:hover,
  html.dark .product-detail-page .size-guide-link:hover,
  html[data-tu-theme="dark"] .product-detail-page .size-guide-link:hover {
    color: var(--pd-text) !important;
  }

  /* — TAILLES (option-value) — non sélectionnée lisible, sélectionnée inversée — */
  body.dark-mode .product-detail-page .option-value,
  html.dark .product-detail-page .option-value,
  html[data-tu-theme="dark"] .product-detail-page .option-value {
    background: rgba(255,255,255,0.04) !important;
    color: var(--pd-text) !important;
    border-color: var(--pd-border-strong) !important;
  }
  body.dark-mode .product-detail-page .option-value:hover,
  html.dark .product-detail-page .option-value:hover,
  html[data-tu-theme="dark"] .product-detail-page .option-value:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.32) !important;
  }
  body.dark-mode .product-detail-page .option-value.selected,
  html.dark .product-detail-page .option-value.selected,
  html[data-tu-theme="dark"] .product-detail-page .option-value.selected {
    background: #FFFFFF !important;
    color: #0A0A0A !important;
    border-color: #FFFFFF !important;
  }
  body.dark-mode .product-detail-page .option-value.disabled,
  html.dark .product-detail-page .option-value.disabled,
  html[data-tu-theme="dark"] .product-detail-page .option-value.disabled {
    color: var(--pd-faint) !important;
    border-color: var(--pd-border) !important;
  }

  /* — COULEURS (color-option) — visibles dans les deux modes via box-shadow,
        on assure le ring de sélection sur dark (bg-card) — */
  body.dark-mode .product-detail-page .color-option,
  html.dark .product-detail-page .color-option,
  html[data-tu-theme="dark"] .product-detail-page .color-option {
    box-shadow: 0 0 0 2px var(--pd-border-strong);
  }
  body.dark-mode .product-detail-page .color-option.selected,
  html.dark .product-detail-page .color-option.selected,
  html[data-tu-theme="dark"] .product-detail-page .color-option.selected {
    box-shadow: 0 0 0 3px var(--pd-accent), 0 0 0 5px #0A0A0A !important;
  }

  /* — QUANTITY CONTROL — */
  body.dark-mode .product-detail-page .quantity-control,
  html.dark .product-detail-page .quantity-control,
  html[data-tu-theme="dark"] .product-detail-page .quantity-control {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--pd-border-strong) !important;
  }
  body.dark-mode .product-detail-page .quantity-control input[type="number"],
  body.dark-mode .product-detail-page #product-quantity,
  html.dark .product-detail-page .quantity-control input[type="number"],
  html.dark .product-detail-page #product-quantity,
  html[data-tu-theme="dark"] .product-detail-page .quantity-control input[type="number"],
  html[data-tu-theme="dark"] .product-detail-page #product-quantity {
    background: transparent !important;
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .quantity-control button,
  html.dark .product-detail-page .quantity-control button,
  html[data-tu-theme="dark"] .product-detail-page .quantity-control button {
    color: var(--pd-accent) !important;
  }

  /* — WISHLIST BTN DETAIL — */
  body.dark-mode .product-detail-page .wishlist-btn-detail,
  html.dark .product-detail-page .wishlist-btn-detail,
  html[data-tu-theme="dark"] .product-detail-page .wishlist-btn-detail {
    border-color: var(--pd-border-strong) !important;
    color: var(--pd-soft) !important;
    background: rgba(255,255,255,0.04) !important;
  }
  body.dark-mode .product-detail-page .wishlist-btn-detail:hover,
  body.dark-mode .product-detail-page .wishlist-btn-detail.active,
  html.dark .product-detail-page .wishlist-btn-detail:hover,
  html.dark .product-detail-page .wishlist-btn-detail.active,
  html[data-tu-theme="dark"] .product-detail-page .wishlist-btn-detail:hover,
  html[data-tu-theme="dark"] .product-detail-page .wishlist-btn-detail.active {
    border-color: var(--pd-danger) !important;
    color: var(--pd-danger) !important;
    background: rgba(255,86,112,0.12) !important;
  }

  /* — STOCK / SKU / META — inline style ne portant pas de color → ici on force — */
  body.dark-mode .product-detail-page #stock-message,
  html.dark .product-detail-page #stock-message,
  html[data-tu-theme="dark"] .product-detail-page #stock-message {
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .product-sku,
  body.dark-mode .product-detail-page .sku,
  body.dark-mode .product-detail-page [data-sku],
  body.dark-mode .product-detail-page .product-meta,
  html.dark .product-detail-page .product-sku,
  html.dark .product-detail-page .sku,
  html.dark .product-detail-page [data-sku],
  html.dark .product-detail-page .product-meta,
  html[data-tu-theme="dark"] .product-detail-page .product-sku,
  html[data-tu-theme="dark"] .product-detail-page .sku,
  html[data-tu-theme="dark"] .product-detail-page [data-sku],
  html[data-tu-theme="dark"] .product-detail-page .product-meta {
    color: var(--pd-soft) !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     SERVICE CARDS — .reassurance-block / .reassurance-item
     C'est la rangée "Livraison rapide / Retours gratuits / Paiement
     sécurisé / Service client" en bas du bloc produit. En dark, devient
     une vraie carte avec background sombre cohérent (--pd-card).
     ════════════════════════════════════════════════════════════════════ */
  body.dark-mode .product-detail-page .reassurance-block,
  html.dark .product-detail-page .reassurance-block,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-block {
    background: var(--pd-card) !important;
    border-color: var(--pd-border) !important;
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .reassurance-item,
  html.dark .product-detail-page .reassurance-item,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-item {
    background: transparent !important;
    border-right-color: var(--pd-border) !important;
    color: inherit !important;
  }
  body.dark-mode .product-detail-page .reassurance-item:hover,
  html.dark .product-detail-page .reassurance-item:hover,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-item:hover {
    background: var(--pd-card-hover) !important;
  }
  /* Icône desktop (mobile gère déjà le cercle vert via le @media (max-width:768px)
     en haut de ce style, qui inclut son propre body.dark-mode override) */
  @media (min-width: 769px) {
    body.dark-mode .product-detail-page .reassurance-item > i,
    html.dark .product-detail-page .reassurance-item > i,
    html[data-tu-theme="dark"] .product-detail-page .reassurance-item > i {
      color: var(--pd-accent) !important;
    }
  }
  body.dark-mode .product-detail-page .reassurance-item span,
  html.dark .product-detail-page .reassurance-item span,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-item span {
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .reassurance-item small,
  html.dark .product-detail-page .reassurance-item small,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-item small {
    color: var(--pd-soft) !important;
  }
  /* Alias .service-card si un autre composant utilise ce nom — défensif */
  body.dark-mode .product-detail-page .service-card,
  html.dark .product-detail-page .service-card,
  html[data-tu-theme="dark"] .product-detail-page .service-card {
    background: var(--pd-card) !important;
    border-color: var(--pd-border) !important;
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .service-card h4,
  body.dark-mode .product-detail-page .service-card p,
  html.dark .product-detail-page .service-card h4,
  html.dark .product-detail-page .service-card p,
  html[data-tu-theme="dark"] .product-detail-page .service-card h4,
  html[data-tu-theme="dark"] .product-detail-page .service-card p {
    color: inherit !important;
  }

  /* — GALLERY : navigation flèches + zoom icon + thumbnail active — */
  body.dark-mode .product-detail-page .gallery-nav-btn,
  html.dark .product-detail-page .gallery-nav-btn,
  html[data-tu-theme="dark"] .product-detail-page .gallery-nav-btn {
    background: rgba(20,20,20,0.85) !important;
    color: var(--pd-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
  }
  body.dark-mode .product-detail-page .gallery-nav-btn:hover,
  html.dark .product-detail-page .gallery-nav-btn:hover,
  html[data-tu-theme="dark"] .product-detail-page .gallery-nav-btn:hover {
    background: rgba(30,30,30,0.95) !important;
  }
  body.dark-mode .product-detail-page .zoom-icon,
  html.dark .product-detail-page .zoom-icon,
  html[data-tu-theme="dark"] .product-detail-page .zoom-icon {
    background: rgba(20,20,20,0.8) !important;
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-detail-page .zoom-icon:hover,
  html.dark .product-detail-page .zoom-icon:hover,
  html[data-tu-theme="dark"] .product-detail-page .zoom-icon:hover {
    background: rgba(30,30,30,0.95) !important;
  }
  body.dark-mode .product-detail-page .thumbnail-image.active,
  html.dark .product-detail-page .thumbnail-image.active,
  html[data-tu-theme="dark"] .product-detail-page .thumbnail-image.active {
    border-color: var(--pd-accent) !important;
  }

  /* — STICKY MOBILE BAR — affiché en mode mobile uniquement — */
  body.dark-mode .sticky-mobile-bar,
  html.dark .sticky-mobile-bar,
  html[data-tu-theme="dark"] .sticky-mobile-bar {
    background: #0f1411 !important;
    border-top-color: var(--pd-border-strong) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.4) !important;
  }
  body.dark-mode .sticky-mobile-price,
  html.dark .sticky-mobile-price,
  html[data-tu-theme="dark"] .sticky-mobile-price {
    color: var(--pd-text, #fff) !important;
  }
  body.dark-mode .sticky-mobile-btn,
  html.dark .sticky-mobile-btn,
  html[data-tu-theme="dark"] .sticky-mobile-btn {
    background: var(--primary-dark, #1E8449) !important;
    color: #fff !important;
  }
  body.dark-mode .sticky-mobile-btn:hover,
  html.dark .sticky-mobile-btn:hover,
  html[data-tu-theme="dark"] .sticky-mobile-btn:hover {
    background: #27ae60 !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     ONGLETS DESCRIPTION / DÉTAILS (.product-tabs-section)
     Section sœur de .product-detail-page (pas un descendant) → on cible
     directement la section avec ses propres tokens.
     ════════════════════════════════════════════════════════════════════ */
  body.dark-mode .product-tabs-section,
  html.dark .product-tabs-section,
  html[data-tu-theme="dark"] .product-tabs-section {
    background: var(--pd-card) !important;
    border: 1px solid var(--pd-border) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  }
  body.dark-mode .product-tabs-section .tabs-header,
  html.dark .product-tabs-section .tabs-header,
  html[data-tu-theme="dark"] .product-tabs-section .tabs-header {
    border-bottom-color: var(--pd-border) !important;
  }
  body.dark-mode .product-tabs-section .tab-button,
  html.dark .product-tabs-section .tab-button,
  html[data-tu-theme="dark"] .product-tabs-section .tab-button {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-tabs-section .tab-button:hover,
  html.dark .product-tabs-section .tab-button:hover,
  html[data-tu-theme="dark"] .product-tabs-section .tab-button:hover {
    color: var(--pd-text) !important;
  }
  body.dark-mode .product-tabs-section .tab-button.active,
  html.dark .product-tabs-section .tab-button.active,
  html[data-tu-theme="dark"] .product-tabs-section .tab-button.active {
    color: var(--pd-accent) !important;
  }
  body.dark-mode .product-tabs-section .tab-button.active::after,
  html.dark .product-tabs-section .tab-button.active::after,
  html[data-tu-theme="dark"] .product-tabs-section .tab-button.active::after {
    background: var(--pd-accent) !important;
  }
  /* Contenu : produit-detail.css forçait color: var(--text-color-light) (vide).
     On force ici un texte lisible avec !important pour battre la spec (0,2,0). */
  body.dark-mode .product-tabs-section .tab-content,
  body.dark-mode .product-tabs-section .tab-content p,
  body.dark-mode .product-tabs-section #product-long-description,
  html.dark .product-tabs-section .tab-content,
  html.dark .product-tabs-section .tab-content p,
  html.dark .product-tabs-section #product-long-description,
  html[data-tu-theme="dark"] .product-tabs-section .tab-content,
  html[data-tu-theme="dark"] .product-tabs-section .tab-content p,
  html[data-tu-theme="dark"] .product-tabs-section #product-long-description {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-tabs-section .tab-content h4,
  html.dark .product-tabs-section .tab-content h4,
  html[data-tu-theme="dark"] .product-tabs-section .tab-content h4 {
    color: var(--pd-heading) !important;
  }
  body.dark-mode .product-tabs-section .tab-content ul li,
  html.dark .product-tabs-section .tab-content ul li,
  html[data-tu-theme="dark"] .product-tabs-section .tab-content ul li {
    color: var(--pd-soft) !important;
  }
  body.dark-mode .product-tabs-section .tab-content ul li strong,
  html.dark .product-tabs-section .tab-content ul li strong,
  html[data-tu-theme="dark"] .product-tabs-section .tab-content ul li strong {
    color: var(--pd-text) !important;
  }

  /* — BADGES — */
  body.dark-mode .product-detail-page .badge-lowstock,
  html.dark .product-detail-page .badge-lowstock,
  html[data-tu-theme="dark"] .product-detail-page .badge-lowstock {
    background: var(--pd-warn-bg) !important;
    color: var(--pd-warn-fg) !important;
    border-color: var(--pd-warn-line) !important;
  }

  /* — Liens "nus" (sans classe) à l'intérieur du scope — */
  body.dark-mode .product-detail-page a:not([class]),
  html.dark .product-detail-page a:not([class]),
  html[data-tu-theme="dark"] .product-detail-page a:not([class]) {
    color: #fff !important;
  }


/* --- TU-PANELS-ROUND-CATA-06-START --- */
.tu-reco-head,
.tu-form-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: clamp(18px, 2vw, 28px);
  padding-block: clamp(20px, 2.4vw, 32px);
}
.tu-reco-head > :last-child,
.tu-form-head > :last-child { margin-bottom: 0; }
/* --- TU-PANELS-ROUND-CATA-06-END --- */

/* --- TU-PRODUCT-DETAIL-08B-START --- */
/* [08B 2026-07-04] Normalisation footer produit-detail + polish reviews (audit 08).
   FOOTER: produit-detail était boxé (footer 1160px, grille 3 colonnes, « Suis-nous » sur
   une 2e ligne) alors que toutes les autres pages ont un footer full-bleed 4 colonnes.
   CAUSE RACINE = produit-detail.css:17 `.product-detail-page{max-width:1200px;margin:0
   auto;padding:20px}` : cette classe est portée par le <body> ET par <main>, donc tout le
   body (header + footer inclus) est plafonné à 1200px. Le contenu produit possède déjà son
   propre .container(max-width) => la contrainte body est redondante pour le contenu et ne
   fait que boxer header/footer. FIX = neutraliser la contrainte sur le BODY uniquement
   (main.product-detail-page la conserve => contenu produit inchangé) : footer + header
   redeviennent full-bleed comme les autres pages. html,body ont overflow-x:hidden
   (responsive-premium.css) => 0 débordement horizontal (vérifié 390/430/768/1366/1920). */
body.product-detail-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* [08B — B2] tu-rv-header (« Ce qu'en pensent nos clients ») : padding-bas mobile trop
   serré (6px, posé par tu-product-detail-mobile-polish.css:178 !important, spécificité
   0,3,1). On rétablit un bas respirant (reste plus tight que le desktop 36px). Le préfixe
   `html` porte la spécificité à 0,3,2 pour battre le 0,3,1 !important malgré un chargement
   plus tôt dans la cascade. */
@media (max-width: 768px) {
  html body.product-detail-page .tu-product-reviews .tu-rv-header {
    padding-bottom: clamp(16px, 4vw, 22px) !important;
  }
}
/* --- TU-PRODUCT-DETAIL-08B-END --- */

/* Ajustements layout fiche produit (ouverture publique) — scope produit-detail. */
/* 1) Champ quantite type=number : masquer les fleches natives pour centrer le chiffre entre - et +. */
body.product-detail-page #product-quantity { -moz-appearance: textfield; appearance: textfield; }
body.product-detail-page #product-quantity::-webkit-inner-spin-button,
body.product-detail-page #product-quantity::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 2) Colonne galerie : ne pas s'etirer sur la hauteur de la colonne infos. */
body.product-detail-page .product-gallery { align-self: start; }
/* 3) Section avis : colonne intermediaire centree et COHERENTE (etait pleine largeur ~1160, juge
      trop massif). Entete, synthese, barres, liste, actions/partage -> meme largeur 1040 centree.
      Desktop uniquement ; en dessous de 993px tout reste pleine largeur (flux mobile inchange).
      L'overlay popup (position:fixed) n'est pas cible. */
@media (min-width: 993px) {
  body.product-detail-page .tu-product-reviews > .tu-rv-header,
  body.product-detail-page .tu-product-reviews > .tu-rv-summary,
  body.product-detail-page .tu-product-reviews > .tu-rv-trust-row,
  body.product-detail-page .tu-product-reviews > .tu-rv-toolbar,
  body.product-detail-page .tu-product-reviews > #reviews-list,
  body.product-detail-page .tu-product-reviews > .tu-rv-showmore-wrap,
  body.product-detail-page .tu-product-reviews > .reviews-actions {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Colonne highlights absente -> le formulaire occupe toute la largeur de son conteneur. */
body.product-detail-page .reviews-actions { grid-template-columns: 1fr; }
body.product-detail-page .review-form-card { max-width: none; }
/* Moins massif : padding vertical resserre sur l'entete et la carte partage. */
body.product-detail-page .tu-product-reviews .tu-rv-header { padding-top: 26px; padding-bottom: 26px; }
body.product-detail-page .review-form-card { padding-top: 26px; padding-bottom: 24px; }
/* 4) Blocs secondaires (reassurance + pourquoi) : deplaces en pleine largeur sous le hero pour
      reduire le vide a gauche sous l'image (desktop 2 colonnes). Mobile = flux vertical normal. */
body.product-detail-page .tu-pd-secondary {
  display: grid;
  gap: 16px;
  margin: 4px 0 8px;
}
body.product-detail-page .tu-pd-secondary > .reassurance-block,
body.product-detail-page .tu-pd-secondary > .tu-conv-why {
  margin: 0;
}
@media (min-width: 993px) {
  body.product-detail-page .tu-pd-secondary {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
    gap: 24px;
  }
  body.product-detail-page .tu-pd-secondary > .tu-conv-why {
    margin: 0;
  }
  body.product-detail-page .tu-pd-secondary .tu-conv-why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 22px;
  }
}

/* --- TU-PRODUCT-DETAIL-LAYOUT-POLISH-03-START --- */
/* Deux ajustements fiche produit (desktop), scopés body.product-detail-page.
   (1) Onglets Description/Détails : la carte s'étendait bord à bord dans les gouttières
       de 2rem du conteneur (largeur ~1160) alors que les blocs voisins (hero, réassurance,
       « pourquoi cette pièce ») s'alignent sur la zone de contenu (~1096). On recadre la
       carte sur cette zone (largeur max = contenu, centrée, sans gouttière propre) : le
       texte des onglets ne bouge pas, seule la carte se resserre pour s'aligner.
   (2) Réassurance : une rangée rigide de 4 colonnes séparées par des filets (effet
       « tableau ») → grille 2×2 de cartes aérées, alignée sur le rendu mobile déjà validé
       (mêmes teintes vertes que les pastilles 2×2 et les chips near-cta). */

/* (1) Alignement en largeur de la carte Description/Détails.
   La carte reprend le MÊME retrait latéral que la gouttière .container des blocs voisins
   (2rem), au lieu d'occuper toute la largeur du conteneur : ses bords tombent alors sur ceux
   du hero / de la réassurance / du « pourquoi » (zone de contenu ~1096) à toutes les largeurs
   >= 1025px, et non plus seulement à >= 1240px. Le texte des onglets ne bouge pas (son retrait
   reste porté par .tab-content (30px) et .tab-button). */
@media (min-width: 993px) {
  body.product-detail-page .product-tabs-section {
    max-width: 1096px;            /* borne haute = zone de contenu .container à >= 1240px */
    margin-left: 2rem;            /* = padding horizontal .container (gouttière) des voisins */
    margin-right: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
}

/* (2) Réassurance premium — grille 2×2 de cartes (>= 769px ; <= 768px garde ses pastilles
      via tu-mobile-polish.css §14.10). */
@media (min-width: 769px) {
  body.product-detail-page .reassurance-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  body.product-detail-page .reassurance-block .reassurance-item {
    flex: none;
    border: 1px solid rgba(46, 204, 113, 0.18);
    border-radius: 14px;
    background: rgba(46, 204, 113, 0.05);
    padding: 18px 16px;
    gap: 8px;
    align-items: center;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  body.product-detail-page .reassurance-block .reassurance-item:hover {
    background: rgba(46, 204, 113, 0.09);
    border-color: rgba(46, 204, 113, 0.30);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(19, 32, 51, 0.08);
  }
  /* Icône en pastille (cohérent avec le mobile et les chips near-cta) */
  body.product-detail-page .reassurance-block .reassurance-item > i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(46, 204, 113, 0.22);
    color: #1E8449;
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 2px;
    flex-shrink: 0;
  }
  body.product-detail-page .reassurance-block .reassurance-item span {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pd-text, #132033);
    line-height: 1.3;
  }
  body.product-detail-page .reassurance-block .reassurance-item small {
    font-size: 0.74rem;
    color: var(--pd-muted, rgba(19, 32, 51, 0.62));
    line-height: 1.4;
  }

  /* Dark mode : conteneur transparent, chaque item devient une carte teintée verte.
     Neutralise les 2 règles dark historiques (bloc = carte / items transparents),
     conçues pour l'ancienne rangée unique. Spécificité +1 (.reassurance-block dans la
     chaîne) et position plus tardive => l'emportent sur les !important existants. */
  body.dark-mode .product-detail-page .reassurance-block,
  html.dark .product-detail-page .reassurance-block,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-block {
    background: transparent !important;
    border: none !important;
  }
  body.dark-mode .product-detail-page .reassurance-block .reassurance-item,
  html.dark .product-detail-page .reassurance-block .reassurance-item,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-block .reassurance-item {
    background: rgba(46, 204, 113, 0.08) !important;
    border: 1px solid rgba(46, 204, 113, 0.22) !important;
  }
  body.dark-mode .product-detail-page .reassurance-block .reassurance-item:hover,
  html.dark .product-detail-page .reassurance-block .reassurance-item:hover,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-block .reassurance-item:hover {
    background: rgba(46, 204, 113, 0.13) !important;
    border-color: rgba(46, 204, 113, 0.34) !important;
  }
  body.dark-mode .product-detail-page .reassurance-block .reassurance-item > i,
  html.dark .product-detail-page .reassurance-block .reassurance-item > i,
  html[data-tu-theme="dark"] .product-detail-page .reassurance-block .reassurance-item > i {
    background: rgba(46, 204, 113, 0.10) !important;
    border-color: rgba(46, 204, 113, 0.30) !important;
    color: #5ED480 !important;
  }
}
/* --- TU-PRODUCT-DETAIL-LAYOUT-POLISH-03-END --- */