/* ==========================================================================
   CONFIGURATEUR PRODUIT - STYLE PROFESSIONNEL (RESTORED)
   ========================================================================== */

:root {
  --wcppcm-primary: #ff8900;
  --wcppcm-primary-hover: #e67e00;
  --wcppcm-bg-modal: #ffffff;
  --wcppcm-bg-sidebar: #ffffff;
  --wcppcm-bg-preview: #f8fafc;
  --wcppcm-text-main: #1e293b;
  --wcppcm-text-light: #475569;
  --wcppcm-border: #e2e8f0;
  --wcppcm-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --wcppcm-radius: 12px;
}

/* Modal Overlay */
#wcppcmLogoToolModal {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 2147483647 !important;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.wcppcm-modal-open {
  overflow: hidden !important;
}

/* Main Content Container - GRID SIDE-BY-SIDE */
.wcppcm-logo-tool-content {
  display: grid;
  grid-template-columns: 380px 1fr;
  width: 100vw;
  height: 100vh;
  background: #fff;
  position: relative;
  box-shadow: none;
  border: none;
}

/* Sidebar */
.wcppcm-sidebar {
  background: #fff;
  padding: 25px;
  overflow-y: auto;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}

/* Preview Area */
.wcppcm-preview-area {
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcppcm-preview-wrapper {
  width: 100%;
  height: 100%;
  /* Remove flex centering to allow 100% image/zone overlap */
  cursor: grab;
  overflow: hidden;
  position: relative;
}

#wcppcmProductContainer {
  position: relative;
  transform-origin: center top;
  transition: transform 0.1s ease-out;
  /* Smooth but reactive */
}

#wcppcmProductBg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Marking Zone & Canvas */
.wcppcm-marking-zone {
  border: 1px dashed rgba(255, 137, 0, 0.4);
  box-sizing: border-box;
  pointer-events: auto;
}

.wcppcm-marking-zone canvas {
  width: 100% !important;
  height: 100% !important;
  cursor: move;
}

/* UI Elements - Tabs */
.wcppcm-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}

.wcppcm-tab-btn,
.wcppcm-tabtarget-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wcppcm-text-light);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wcppcm-tab-btn.active,
.wcppcm-tabtarget-btn.active {
  background: #fff;
  color: var(--wcppcm-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Stepper */
.wcppcm-stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  padding: 0 10px;
}

.wcppcm-step {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  position: relative;
  padding-top: 20px;
}

.wcppcm-step.active {
  color: var(--wcppcm-primary);
}

.wcppcm-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  z-index: 2;
}

.wcppcm-step.active::before {
  background: var(--wcppcm-primary);
  box-shadow: 0 0 0 1px var(--wcppcm-primary);
}

/* Handles */
.wcppcm-resize-handle,
.wcppcm-rotate-handle,
.wcppcm-delete-handle,
.wcppcm-drag-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid var(--wcppcm-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  /* Priorité haute */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Extension de la zone cliquable pour la précision */
.wcppcm-resize-handle::before,
.wcppcm-rotate-handle::before,
.wcppcm-delete-handle::before,
.wcppcm-drag-handle::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.wcppcm-resize-handle::after {
  content: '↔';
  font-size: 12px;
  color: var(--wcppcm-primary);
  transform: rotate(45deg);
}

.wcppcm-rotate-handle::after {
  content: '↻';
  font-size: 14px;
  color: var(--wcppcm-primary);
}

.wcppcm-delete-handle::after {
  content: '×';
  font-size: 18px;
  color: #ef4444;
}

.wcppcm-drag-handle::after {
  content: '✥';
  font-size: 16px;
  color: var(--wcppcm-primary);
}

.wcppcm-delete-handle {
  border-color: #ef4444;
}

/* Misc UI */
.sidebar-section {
  margin-bottom: 24px;
}

.sidebar-section label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wcppcm-text-main);
  margin-bottom: 8px;
}

.wcppcm-logo-tool-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

#wcppcmToolSave {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: auto;
  min-width: 200px;
  background: var(--wcppcm-primary);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(255, 137, 0, 0.4);
  transition: all 0.2s;
  cursor: pointer;
}

#wcppcmToolSave:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -3px rgba(255, 137, 0, 0.5);
}

#wcppcmToolPreview {
  position: absolute;
  top: 24px;
  right: 64px;
  /* A gauche de la croix de fermeture */
  z-index: 1000;
  background: #fff;
  color: var(--wcppcm-text-main);
  border: 1px solid var(--wcppcm-border);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

#wcppcmToolPreview:hover {
  border-color: var(--wcppcm-primary);
  color: var(--wcppcm-primary);
}

.wcppcm-upload-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--wcppcm-border);
}

.wcppcm-upload-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--wcppcm-text-main);
  cursor: pointer;
}

.wcppcm-upload-option input {
  margin: 0;
}

@media (max-width: 1024px) {
  #wcppcmToolSave {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}

.wcppcm-logo-tool-close:hover {
  transform: rotate(90deg);
}

/* ---- Shortcodes séparés ---- */
.wcppcm-qty-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.wcppcm-qty-btn {
  background: #f5f5f5;
  border: none;
  padding: 8px 14px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  color: #333;
  transition: background 0.2s;
}

.wcppcm-qty-btn:hover {
  background: #e0e0e0;
}

.wcppcm-qty-proxy {
  width: 60px;
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 8px 4px;
  font-size: 15px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.wcppcm-qty-proxy::-webkit-inner-spin-button,
.wcppcm-qty-proxy::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.wcppcm-atc-proxy {
  cursor: pointer;
}

.wcppcm-variations-proxy .variations {
  width: 100%;
  border-collapse: collapse;
}

.wcppcm-variations-proxy .variations td,
.wcppcm-variations-proxy .variations th {
  padding: 6px 8px;
  vertical-align: middle;
}

.wcppcm-variations-proxy .variations label {
  font-weight: 600;
  font-size: 13px;
}

/* ==========================================================================
   ANTI-FUITE DU PRIX D'ACHAT (coût fournisseur) — fiche produit
   ==========================================================================
   Le prix WooCommerce natif de ces produits = le COÛT (prix Makito importé).
   front.js le remplace par le bloc "À partir de" (.wcppcm-from-block = prix de
   VENTE) dès le chargement (seedé sur initial_price, sans attendre l'AJAX).
   Tant que le bloc n'est pas injecté, on masque le prix natif (visibility:hidden
   garde la place → pas de saut de layout) pour ne JAMAIS flasher le coût.
   Le bloc injecté ré-affiche (override visibility). Scopé via
   body.wcppcm-single-dynamic (ajouté en PHP → présent dès le <head>, donc le
   masquage s'applique AVANT la 1ère peinture). */
body.wcppcm-single-dynamic .summary .price,
body.wcppcm-single-dynamic .et_pb_wc_price .price,
body.wcppcm-single-dynamic .et_pb_wc_price_0_tb_body .price {
  visibility: hidden;
}
body.wcppcm-single-dynamic .summary .price .wcppcm-from-block,
body.wcppcm-single-dynamic .et_pb_wc_price .price .wcppcm-from-block,
body.wcppcm-single-dynamic .et_pb_wc_price_0_tb_body .price .wcppcm-from-block {
  visibility: visible;
}

/* ==========================================================================
   BLOC "À PARTIR DE"
   ========================================================================== */

.wcppcm-from-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.wcppcm-from-left {
  flex: 1;
}

.wcppcm-from-label {
  font-size: 12px;
  color: #475569;
  margin-bottom: 2px;
  line-height: 2;
}

.wcppcm-from-price-row {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  line-height: 2;
  margin-bottom: 3px;
}

.wcppcm-from-best-info {
  font-size: 11px;
  color: #f59e0b;
}

.wcppcm-from-right {
  text-align: right;
  flex-shrink: 0;
  border-left: 1px dashed #e2e8f0;
  padding-left: 14px;
}

.wcppcm-from-moq-label {
  font-size: 11px;
  color: #475569;
  line-height: 1.2;
}

.wcppcm-from-moq-val {
  font-size: 17px;
  font-weight: 800;
  color: #16a34a;
  line-height: 1.3;
}

.wcppcm-from-moq-info {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Une seule quantité / pas de tarif dégressif plus bas → prix seul centré */
.wcppcm-from-block--single .wcppcm-from-left {
  flex: 0 1 auto;
}

.wcppcm-from-savings {
  font-size: 11px;
  color: #22c55e;
  font-weight: 600;
  margin-top: 3px;
}

/* ==========================================================================
   TARIFS DÉGRESSIFS — card moderne avec colonne active mise en pill orange
   ========================================================================== */

.wcppcm_section.wcppcm_tiers_section {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

/* Header : icône + titre à gauche, pill mode dynamique à droite */
.wcppcm_tiers_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wcppcm_tiers_header_main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wcppcm_tiers_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  color: #0a9bcd;
  flex-shrink: 0;
}
.wcppcm_tiers_title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wcppcm_tiers_mode_pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wcppcm_tiers_mode_pill.is-marked {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #9a3412;
  border-color: #fb923c;
}

/* Wrapper scroll horizontal silencieux */
.wcppcm_tiers_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  margin: 0 -4px;
  padding: 0 4px 4px;
}
.wcppcm_tiers_wrapper::-webkit-scrollbar { height: 6px; }
.wcppcm_tiers_wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.wcppcm_tiers_wrapper::-webkit-scrollbar-track { background: transparent; }

/* Table */
.wcppcm_tiers_table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Header (quantités) */
.wcppcm_tiers_table thead th {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  padding: 10px 8px;
  text-align: center;
  background: #f8fafc;
  border: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.wcppcm_tiers_table thead th[data-tier-qty] {
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.wcppcm_tiers_table thead th[data-tier-qty]:hover {
  background-color: #e0f2fe;
  color: #0369a1;
}

/* Corps (prix) */
.wcppcm_tiers_table tbody td {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  padding: 12px 8px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}

/* Première colonne : libellé "Qté" / "Prix /pce + sous-label" */
.wcppcm_tiers_table .wcppcm_tiers_rowhead {
  text-align: left;
  padding-left: 4px;
  padding-right: 14px;
  background: transparent;
  border-top: none;
  border-bottom: 1px solid #f1f5f9;
}
.wcppcm_tiers_table thead th.wcppcm_tiers_rowhead {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  border-top: none;
  background: transparent;
}
.wcppcm_tiers_rowlabel {
  display: block;
  font-weight: 700;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.2;
}
.wcppcm_tiers_sublabel {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
}

/* Coins arrondis sur la première et dernière colonne pour que la table respire */
.wcppcm_tiers_table thead th.wcppcm_tier_first { border-top-left-radius: 10px; }
.wcppcm_tiers_table thead th.wcppcm_tier_last  { border-top-right-radius: 10px; }
.wcppcm_tiers_table tbody td.wcppcm_tier_first { border-bottom-left-radius: 10px; }
.wcppcm_tiers_table tbody td.wcppcm_tier_last  { border-bottom-right-radius: 10px; }

/* Colonne ACTIVE : pill orange continu thead+tbody */
.wcppcm_tiers_table thead th.wcppcm_tier_active {
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
  color: #ffffff;
  border-color: #ea580c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 -2px 0 #ea580c inset;
}
.wcppcm_tiers_table thead th.wcppcm_tier_active[data-tier-qty]:hover {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
}
.wcppcm_tiers_table tbody td.wcppcm_tier_active {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 2px solid #f97316;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.25);
}

/* Colonne meilleur tarif (si différente de l'active) : juste un soupçon de vert */
.wcppcm_tiers_table tbody td.wcppcm_tier_cheapest:not(.wcppcm_tier_active) {
  color: #15803d;
  position: relative;
}
.wcppcm_tiers_table tbody td.wcppcm_tier_cheapest:not(.wcppcm_tier_active)::after {
  content: "★";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: #16a34a;
  opacity: 0.7;
}

/* Footer : aide (legacy — masqué dans le nouveau design) */
.wcppcm_tiers_help {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #475569 !important;
  font-style: normal !important;
  font-size: 11px;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}
.wcppcm_tiers_help_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==========================================================================
   CARDS PALIER — nouveau design 2026-05
   Remplace le tableau dense par des cards cliquables avec saving % + best-price badge
   ========================================================================== */

.wcppcm_tier_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.wcppcm_tier_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px 12px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 96px;
  /* Reset button defaults */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.wcppcm_tier_card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.12);
}
.wcppcm_tier_card:focus-visible {
  border-color: #0a9bcd;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.18);
}

/* Card active = palier appliqué actuellement */
.wcppcm_tier_card.is-active {
  background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
  border-color: #f59e0b;
  box-shadow: 0 8px 16px -6px rgba(245, 158, 11, 0.35), inset 0 0 0 1px rgba(245, 158, 11, 0.2);
  transform: translateY(-3px);
}
.wcppcm_tier_card.is-active .wcppcm_tier_card_qty { color: #7c2d12; }
.wcppcm_tier_card.is-active .wcppcm_tier_card_saving { color: #b45309; }
.wcppcm_tier_card.is-active .wcppcm_tier_card_price { color: #7c2d12; }

/* Hint "Maximum N pièces — contactez-nous au-delà" sous le sélecteur custom */
.wcppcm_qty_max_hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #475569;
  text-align: center;
}
.wcppcm_qty_max_hint a {
  color: #0a9bcd;
  text-decoration: underline;
  font-weight: 600;
}
.wcppcm_qty_max_hint a:hover { color: #0771a6; }

/* Card désactivée (palier au-delà du plafond produit/fournisseur) */
.wcppcm_tier_card.is-disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
  background: repeating-linear-gradient(45deg, #f8fafc 0 8px, #eef2f7 8px 16px);
  border-color: #cbd5e1;
}
.wcppcm_tier_card.is-disabled:hover {
  transform: none;
  border-color: #cbd5e1;
  box-shadow: none;
}

/* Card "meilleur prix" = palier le moins cher (si différent de l'actif) */
.wcppcm_tier_card.is-cheapest:not(.is-active) {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.wcppcm_tier_card.is-cheapest:not(.is-active) .wcppcm_tier_card_price {
  color: #15803d;
}

/* Badge "Meilleur prix" en haut */
.wcppcm_tier_card_badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

/* Quantité (gros chiffre) */
.wcppcm_tier_card_qty {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* % d'économie */
.wcppcm_tier_card_saving {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1;
  letter-spacing: 0.01em;
}
.wcppcm_tier_card_saving--base {
  color: #475569;
  font-size: 10px;
  font-weight: 600;
}

/* Prix unitaire */
.wcppcm_tier_card_price {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  margin-top: 2px;
}
.wcppcm_tier_card_price .wcppcm-strike {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
  margin-bottom: 2px;
}
.wcppcm_tier_card_price .wcppcm-tier-promo {
  display: block;
  color: #dc2626;
}
.wcppcm_tier_card.is-active .wcppcm-tier-promo {
  color: #7c2d12;
}

/* Quantité personnalisée intégrée (sous les cards) */
.wcppcm_tier_qty_inline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 12px;
}
.wcppcm_tier_qty_inline_label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}
.wcppcm-qty-wrapper--inline {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.wcppcm-qty-wrapper--inline .wcppcm-qty-btn {
  width: 32px;
  height: 36px;
  background: #f8fafc;
  border: none;
  color: #1e293b;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.wcppcm-qty-wrapper--inline .wcppcm-qty-btn:hover { background: #e2e8f0; }
.wcppcm-qty-wrapper--inline .wcppcm-qty-proxy {
  width: 70px;
  height: 36px;
  border: none;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.wcppcm-qty-wrapper--inline .wcppcm-qty-proxy::-webkit-outer-spin-button,
.wcppcm-qty-wrapper--inline .wcppcm-qty-proxy::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Insight économie */
.wcppcm_tier_insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 12px;
  color: #166534;
  line-height: 1.5;
}
.wcppcm_tier_insight_icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.wcppcm_tier_insight_text strong {
  color: #14532d;
  font-weight: 800;
}

/* Mobile : compaction (étend l'ancien breakpoint avec les nouvelles règles cards) */
@media (max-width: 600px) {
  .wcppcm_tiers_section {
    padding: 14px 14px 12px;
    border-radius: 12px;
  }
  .wcppcm_tiers_header { margin-bottom: 10px; }
  .wcppcm_tiers_title { font-size: 14px; }
  .wcppcm_tiers_mode_pill { font-size: 10px; padding: 4px 10px; }

  /* Legacy table (masquée) — compaction au cas où réactivée */
  .wcppcm_tiers_table thead th { font-size: 10px; padding: 8px 6px; }
  .wcppcm_tiers_table tbody td { font-size: 12px; padding: 10px 6px; }
  .wcppcm_tiers_table tbody td.wcppcm_tier_active { font-size: 13px; }
  .wcppcm_tiers_help { font-size: 10px; }

  /* Cards : grid 2x3 ou 3x2 selon nombre de paliers */
  .wcppcm_tier_cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .wcppcm_tier_card {
    padding: 12px 4px 10px;
    min-height: 86px;
    border-width: 1.5px;
  }
  .wcppcm_tier_card_qty { font-size: 16px; }
  .wcppcm_tier_card_saving { font-size: 10px; }
  .wcppcm_tier_card_price { font-size: 12px; }
  .wcppcm_tier_card_badge { font-size: 8px; padding: 2px 6px; top: -7px; }

  .wcppcm_tier_qty_inline {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .wcppcm_tier_qty_inline_label { font-size: 11px; }
  .wcppcm-qty-wrapper--inline .wcppcm-qty-btn { width: 38px; height: 40px; font-size: 18px; }
  .wcppcm-qty-wrapper--inline .wcppcm-qty-proxy { width: 80px; height: 40px; font-size: 15px; }

  .wcppcm_tier_insight { font-size: 11px; padding: 10px 12px; }
}

/* Très petit (≤380px) : grid 2 colonnes pour respirer */
@media (max-width: 380px) {
  .wcppcm_tier_cards { grid-template-columns: repeat(2, 1fr); }
}

/* Quand la nouvelle card tier (Step 3 intégré) est présente,
   masque le label standalone "3. Choisissez votre quantité"
   qui devient redondant. */
body:has(.wcppcm_tiers_section .wcppcm_tier_cards) .wcppcm_step_label--qty-standalone {
  display: none !important;
}

/* Idem pour les SHORTCODES qty standalone restants ([wcppcm_qty] placé en
   module Divi séparé en dessous du tier block). Le nouveau stepper inline
   est dans .wcppcm-qty-wrapper--inline donc on cible tout le reste.
   #wcppcm-wc-form-hidden est déjà off-screen (position:absolute left:-9999px)
   donc pas besoin de le re-cibler. */
body:has(.wcppcm_tiers_section .wcppcm_tier_cards) .wcppcm-qty-wrapper:not(.wcppcm-qty-wrapper--inline) {
  display: none !important;
}
/* Filet de sécurité : si Divi affiche un module WC quantité natif (.quantity)
   en dehors du wc-form-hidden (ex: bloc "Détails produit"), on le masque aussi.
   La quantité unique source de vérité est le stepper inline de la tier card. */
body:has(.wcppcm_tiers_section .wcppcm_tier_cards) .et_pb_module .quantity,
body:has(.wcppcm_tiers_section .wcppcm_tier_cards) form.cart > .quantity {
  display: none !important;
}

/* ==========================================================================
   WOOCOMMERCE — QUANTITÉ + AJOUTER AU PANIER
   ========================================================================== */

.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 8px;
  background: #fff;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: none !important;
  border-left: 1.5px solid #e2e8f0 !important;
  border-right: 1.5px solid #e2e8f0 !important;
  width: 84px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 4px;
  height: auto;
  box-shadow: none !important;
  background: #fff;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex: 1;
  box-shadow: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   RECAP BLOCK
   ========================================================================== */

.wcppcm_recap {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Quand le bandeau d'annonce est actif, on pousse le recap pour qu'il ne soit
   pas masqué (la colonne Divi peut être sticky → le recap colle en haut et
   passe derrière le bandeau fixed). +12px pour respirer. */
html.wcppcm-has-launch-banner .wcppcm_recap {
  margin-top: calc(var(--wcppcm-banner-h, 38px) + 12px);
}

.wcppcm_recap_header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0a9bcd, #0771a6);
  border-bottom: none;
}

.wcppcm_recap_title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.wcppcm_recap_live {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, .75);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  white-space: nowrap;
}

.wcppcm_recap_block {
  padding: 7px 16px 5px;
  border-bottom: 1px solid #e2e8f0;
}

.wcppcm_recap_block:last-child {
  border-bottom: none;
}

.wcppcm_recap_block_title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #94a3b8;
  margin-bottom: 3px;
}

.wcppcm_recap_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 1px 0;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.wcppcm_recap_label {
  font-size: 11px;
  color: #475569;
  flex: 1;
  line-height: 1.4;
}

.wcppcm_recap_value {
  font-size: 11px;
  color: #1e293b;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.wcppcm_recap_value--primary {
  color: #1d4ed8;
  font-weight: 700;
}

.wcppcm_recap_value--large {
  font-size: 15px;
}

/* =========================================================================
   ICÔNE PANIER DANS LE MENU (Divi / WP nav menu)
   Automatique sur tout lien menu pointant vers /cart/ ou /panier/.
   ========================================================================= */
/* Lien panier décoré : inline-flex compact + nowrap pour ne pas casser de ligne.
   vertical-align: middle évite que le lien se positionne en haut à cause du baseline
   inline-flex différent des autres items texte du menu. line-height: inherit aligne
   sur la hauteur de ligne des autres items. */
.wcppcm-cart-link-decorated {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  line-height: inherit !important;
}
.wcppcm-menu-cart-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  stroke: currentColor;
  flex-shrink: 0;
}
/* Par défaut le texte "PANIER" reste visible à côté de l'icône.
   Pour MASQUER le texte (icône seule), ajouter la classe `wcppcm-menu-cart-icon-only` sur <body>
   ou la classe `wcppcm-icon-only` directement sur le <li> du menu. */
body.wcppcm-menu-cart-icon-only .wcppcm-menu-cart-label,
li.wcppcm-icon-only .wcppcm-menu-cart-label {
  display: none;
}
.wcppcm-menu-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #cbd5e1;
  color: #1e293b;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.wcppcm-menu-cart-count--active {
  background: #ea580c;
  color: #fff;
}

/* ----------- Positionnement du <li> Panier dans le menu Divi -----------
   Approche : margin-left: auto (push à droite en flex, naturel et aligné).
   align-self: center force le centrage vertical si le parent UL est un flex
   sans align-items explicite. vertical-align: middle pour les cas où le parent
   n'est pas flex (fallback inline-block). */
.wcppcm-cart-menu-item {
  margin-left: auto !important;
  align-self: center !important;
  vertical-align: middle !important;
}

/* Sur mobile, masqué — la bottom nav prend le relais */
@media (max-width: 980px) {
  .wcppcm-cart-menu-item {
    display: none !important;
  }
}

/* =========================================================================
   ICÔNE PANIER HEADER (Divi desktop) — apparue après désactivation FKCart
   ========================================================================= */
.wcppcm-header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 14px;
  color: #1e293b;
  text-decoration: none;
  border-radius: 50%;
  transition: background .15s, color .15s, transform .15s;
}
.wcppcm-header-cart:hover {
  background: #f1f5f9;
  color: #0a9bcd;
  text-decoration: none;
  transform: translateY(-1px);
}
.wcppcm-header-cart__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
.wcppcm-header-cart__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #cbd5e1;
  color: #1e293b;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
  box-sizing: content-box;
  transition: background .15s, color .15s;
}
.wcppcm-header-cart__count--active {
  background: #ea580c;
  color: #fff;
}

/* Fallback fixed si Divi n'a pas pu être ciblé */
.wcppcm-header-cart--fixed {
  position: fixed;
  top: 22px;
  right: 18px;
  z-index: 100;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  border: 1px solid #e2e8f0;
}

/* Header fixe Divi (sticky) : on relève le z-index pour rester au-dessus du contenu */
.et-fixed-header .wcppcm-header-cart,
.et_pb_sticky--fixed .wcppcm-header-cart { z-index: 100; }

/* Masqué sur mobile — la bottom nav prend le relais */
@media (max-width: 980px) {
  .wcppcm-header-cart { display: none !important; }
}

/* =========================================================================
   PAGE PANIER — Layout 2 colonnes inspiré concurrent (items / sticky récap)
   Cohérent avec la charte teal #0a9bcd + navy #1e2a3a
   ========================================================================= */
body.wcppcm-cart-styled .wcppcm-cart-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }
body.wcppcm-cart-styled .wcppcm-cart-title {
  font-size: 32px; font-weight: 700; color: #1e293b; margin: 0 0 20px;
  letter-spacing: -0.01em;
}
body.wcppcm-cart-styled .wcppcm-cart-layout {
  display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start;
}

/* ----- COLONNE ITEMS ----- */
body.wcppcm-cart-styled .wcppcm-cart-item {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.wcppcm-cart-styled .wcppcm-cart-item-title-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 18px;
}
body.wcppcm-cart-styled .wcppcm-cart-item-title {
  font-size: 18px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3;
}
body.wcppcm-cart-styled .wcppcm-cart-item-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f5f9; color: #475569; text-decoration: none; font-size: 18px; line-height: 1;
  transition: background .15s, color .15s;
}
body.wcppcm-cart-styled .wcppcm-cart-item-remove:hover { background: #fee2e2; color: #dc2626; }

body.wcppcm-cart-styled .wcppcm-cart-item-body {
  display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start;
}
body.wcppcm-cart-styled .wcppcm-cart-item-thumb-wrap {
  width: 90px; height: 90px; background: #f8fafc; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid #e2e8f0;
}
body.wcppcm-cart-styled .wcppcm-cart-item-thumb-wrap img,
body.wcppcm-cart-styled .wcppcm-cart-item-thumb {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

body.wcppcm-cart-styled .wcppcm-cart-item-info { min-width: 0; }
body.wcppcm-cart-styled .wcppcm-cart-item-grid {
  display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr 1fr 1fr;
  gap: 12px; align-items: end;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell { display: flex; flex-direction: column; gap: 3px; }
body.wcppcm-cart-styled .wcppcm-cart-item-cell--total { text-align: right; }
body.wcppcm-cart-styled .wcppcm-cart-item-cell-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #475569 !important; font-weight: 700;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell-sub {
  font-size: 11.5px; color: #334155 !important; font-weight: 500;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell-value {
  font-size: 14px; color: #0f172a !important; font-weight: 700;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell--total .wcppcm-cart-item-cell-total-amount {
  font-size: 17px; font-weight: 700; color: #0a9bcd;
}
/* PU à 4 décimales — taille réduite pour ne pas surcharger visuellement */
body.wcppcm-cart-styled .wcppcm-cart-item-cell-pu { font-size: 13px; }
/* Qty input dans cart */
body.wcppcm-cart-styled .wcppcm-cart-item-qty-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell .quantity { display: inline-flex; align-items: center; }
body.wcppcm-cart-styled .wcppcm-cart-item-cell input[type="number"].qty {
  width: 60px; height: 36px; padding: 0 6px;
  border: 1px solid #e2e8f0; border-radius: 8px; text-align: center;
  font-size: 14px; font-weight: 600;
}
/* Bouton "Mettre à jour" — gris désactivé, orange actif dès qu'une qté change */
body.wcppcm-cart-styled .wcppcm-cart-update-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; margin: 0;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #f8fafc; color: #94a3b8;
  font-size: 16px; line-height: 1; cursor: not-allowed;
  transition: all .15s;
}
body.wcppcm-cart-styled .wcppcm-cart-update-btn.is-dirty,
body.wcppcm-cart-styled .wcppcm-cart-update-btn:not(:disabled) {
  background: #ea580c; color: #fff; border-color: #ea580c;
  cursor: pointer;
  animation: wcppcmPulse 1.4s ease-in-out infinite;
}
body.wcppcm-cart-styled .wcppcm-cart-update-btn:not(:disabled):hover {
  background: #c2410c; border-color: #c2410c;
  transform: scale(1.05);
  animation: none;
}
@keyframes wcppcmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
}

body.wcppcm-cart-styled .wcppcm-cart-item-attrs { margin-top: 10px; font-size: 12px; color: #475569; }
body.wcppcm-cart-styled .wcppcm-cart-item-attr { padding: 1px 0; }
body.wcppcm-cart-styled .wcppcm-cart-item-attr strong { color: #1e293b; font-weight: 600; }

body.wcppcm-cart-styled .wcppcm-cart-item-badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
body.wcppcm-cart-styled .wcppcm-cart-item-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fdba74;
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
body.wcppcm-cart-styled .wcppcm-cart-item-badge-icon { font-size: 14px; line-height: 1; }
body.wcppcm-cart-styled .wcppcm-cart-item-badge-edit {
  margin-left: 6px; padding-left: 8px; border-left: 1px solid #fdba74;
  color: #9a3412; text-decoration: none; font-weight: 700;
}
body.wcppcm-cart-styled .wcppcm-cart-item-badge-edit:hover { text-decoration: underline; }

/* Badge promo rouge — distinct du badge personnalisation orange */
body.wcppcm-cart-styled .wcppcm-cart-item-badge--promo {
  background: #fef2f2; color: #991b1b; border-color: #fca5a5;
}
body.wcppcm-cart-styled .wcppcm-cart-item-badge--promo .wcppcm-cart-item-badge-savings {
  margin-left: 6px; padding-left: 8px; border-left: 1px solid #fca5a5;
  font-weight: 700;
}

/* Prix barré (régulier) + prix promo (en rouge) dans les lignes du panier */
body.wcppcm-cart-styled .wcppcm-cart-regular-price {
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 4px;
  font-size: .9em;
}
body.wcppcm-cart-styled .wcppcm-cart-promo-price {
  color: #dc2626;
  text-decoration: none;
  font-weight: 700;
}
body.wcppcm-cart-styled .wcppcm-cart-item-cell--total .wcppcm-cart-promo-price {
  color: #dc2626;
  font-weight: 700;
}

/* Ligne "Vous économisez" dans le récap card de droite */
body.wcppcm-cart-styled .wcppcm-cart-recap-row--savings {
  padding: 8px 10px;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
}
body.wcppcm-cart-styled .wcppcm-cart-recap-savings-amount {
  color: #dc2626; font-weight: 700;
}

body.wcppcm-cart-styled .wcppcm-cart-item-details {
  margin-top: 14px; border-top: 1px solid #f1f5f9; padding-top: 12px;
}
body.wcppcm-cart-styled .wcppcm-cart-item-details summary {
  font-size: 12px; color: #0a9bcd; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
}
body.wcppcm-cart-styled .wcppcm-cart-item-details summary::-webkit-details-marker { display: none; }
body.wcppcm-cart-styled .wcppcm-cart-item-details summary::after {
  content: "▾"; font-size: 10px; transition: transform .2s;
}
body.wcppcm-cart-styled .wcppcm-cart-item-details[open] summary::after { transform: rotate(180deg); }
body.wcppcm-cart-styled .wcppcm-cart-item-details-body {
  margin-top: 12px; padding: 14px; background: #f8fafc; border-radius: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
body.wcppcm-cart-styled .wcppcm-cart-detail-row {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #334155 !important;
}
body.wcppcm-cart-styled .wcppcm-cart-detail-row span:first-child { color: #334155 !important; font-weight: 500; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row span:last-child { font-weight: 700; color: #0f172a !important; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row--total {
  border-top: 1px dashed #cbd5e1; padding-top: 8px; margin-top: 4px;
  font-weight: 700;
}
body.wcppcm-cart-styled .wcppcm-cart-detail-row--total span:last-child { color: #0a9bcd !important; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row--meta { color: #475569 !important; font-size: 12.5px; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row--meta span:first-child { color: #475569 !important; font-weight: 500; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row--meta span:last-child { color: #0f172a !important; font-weight: 600; }
body.wcppcm-cart-styled .wcppcm-cart-detail-row--meta img { max-width: 60px; max-height: 60px; vertical-align: middle; }

body.wcppcm-cart-styled .wcppcm-cart-item-bottom {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e8f0;
}
body.wcppcm-cart-styled .wcppcm-cart-item-bottom-label { font-size: 13px; color: #475569; font-weight: 600; }
body.wcppcm-cart-styled .wcppcm-cart-item-bottom-value { font-size: 18px; font-weight: 700; color: #1e293b; }

body.wcppcm-cart-styled .wcppcm-cart-item-delivery {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px; background: #f0f9ff;
  border: 1px solid #bae6fd; border-radius: 8px; font-size: 13px; color: #075985;
}
body.wcppcm-cart-styled .wcppcm-cart-delivery-icon { font-size: 18px; line-height: 1; }
body.wcppcm-cart-styled .wcppcm-cart-delivery-bat { color: #075985; font-size: 12px; flex: 1 1 100%; margin-left: 26px; margin-top: -3px; }
body.wcppcm-cart-styled .wcppcm-cart-delivery-disclaimer {
  flex: 1 1 100%;
  margin-left: 26px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #bae6fd;
  font-size: 11.5px;
  font-style: italic;
  color: #475569;
  line-height: 1.4;
}

/* ----- COLONNE RECAP STICKY ----- */
body.wcppcm-cart-styled .wcppcm-cart-recap-sticky { position: sticky; top: 100px; }
body.wcppcm-cart-styled .wcppcm-cart-recap-title {
  font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 14px;
}
body.wcppcm-cart-styled .wcppcm-cart-recap-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
body.wcppcm-cart-styled .wcppcm-cart-coupon summary {
  font-size: 13px; color: #1e293b; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; list-style: none;
}
body.wcppcm-cart-styled .wcppcm-cart-coupon summary::-webkit-details-marker { display: none; }
body.wcppcm-cart-styled .wcppcm-cart-coupon summary::after { content: "▾"; font-size: 11px; transition: transform .2s; }
body.wcppcm-cart-styled .wcppcm-cart-coupon[open] summary::after { transform: rotate(180deg); }
body.wcppcm-cart-styled .wcppcm-cart-coupon-body { display: flex; gap: 8px; margin-top: 10px; }
body.wcppcm-cart-styled .wcppcm-cart-coupon-body input {
  flex: 1; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; background: #fff;
}
body.wcppcm-cart-styled .wcppcm-cart-coupon-btn {
  padding: 9px 18px; background: #22c55e; color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
body.wcppcm-cart-styled .wcppcm-cart-coupon-btn:hover { background: #16a34a; }

body.wcppcm-cart-styled .wcppcm-cart-recap-sep { border: none; border-top: 1px solid #e2e8f0; margin: 4px 0; }
body.wcppcm-cart-styled .wcppcm-cart-recap-row,
body.wcppcm-cart-styled .wcppcm-cart-recap-row span {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: #1e293b !important;
}
body.wcppcm-cart-styled .wcppcm-cart-recap-row { color: #1e293b !important; }
body.wcppcm-cart-styled .wcppcm-cart-recap-row > span:first-child { color: #334155 !important; font-weight: 500; }
body.wcppcm-cart-styled .wcppcm-cart-recap-row--small,
body.wcppcm-cart-styled .wcppcm-cart-recap-row--small > span { font-size: 13px; color: #475569 !important; font-weight: 500; }
body.wcppcm-cart-styled .wcppcm-cart-recap-amount { font-weight: 700 !important; color: #0f172a !important; }
body.wcppcm-cart-styled .wcppcm-cart-recap-amount-light { font-weight: 600 !important; color: #475569 !important; }
body.wcppcm-cart-styled .wcppcm-cart-recap-row--total-ht {
  font-size: 17px;
}
body.wcppcm-cart-styled .wcppcm-cart-recap-total-ht { font-size: 22px; color: #1e293b; }

body.wcppcm-cart-styled .wcppcm-cart-checkout-btn {
  display: block; text-align: center; margin-top: 10px;
  padding: 14px 20px; background: #ea580c; color: #fff; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.32);
  transition: background .15s, transform .15s;
  letter-spacing: 0.01em;
}
body.wcppcm-cart-styled .wcppcm-cart-checkout-btn:hover { background: #c2410c; transform: translateY(-1px); }
body.wcppcm-cart-styled .wcppcm-cart-continue-link {
  display: block; text-align: center; margin-top: 4px;
  padding: 8px; color: #475569; font-size: 13px; text-decoration: none;
}
body.wcppcm-cart-styled .wcppcm-cart-continue-link:hover { color: #1e293b; text-decoration: underline; }

/* ----- OVERLAY MISE À JOUR (qty change → form submit) ----- */
#wcppcm-cart-loading {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center; justify-content: center;
  gap: 14px;
  z-index: 99999;
  font-size: 14px; font-weight: 600; color: #1e293b;
}
#wcppcm-cart-loading.is-visible { display: flex; }
.wcppcm-cart-loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #0a9bcd;
  border-radius: 50%;
  animation: wcppcmSpin 0.8s linear infinite;
}
@keyframes wcppcmSpin { to { transform: rotate(360deg); } }

/* ----- PANIER VIDE ----- */
body.wcppcm-cart-styled .wcppcm-cart-empty {
  max-width: 480px; margin: 60px auto; text-align: center;
  background: #fff; border-radius: 14px; padding: 50px 30px;
  border: 1px solid #e2e8f0;
}
body.wcppcm-cart-styled .wcppcm-cart-empty-icon { font-size: 56px; margin-bottom: 14px; }
body.wcppcm-cart-styled .wcppcm-cart-empty h2 { font-size: 22px; color: #1e293b; margin: 0 0 8px; }
body.wcppcm-cart-styled .wcppcm-cart-empty p { color: #475569; margin: 0 0 22px; }
body.wcppcm-cart-styled .wcppcm-cart-empty-cta {
  display: inline-block; padding: 12px 26px;
  background: #0a9bcd; color: #fff; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 14px;
  transition: background .15s;
}
body.wcppcm-cart-styled .wcppcm-cart-empty-cta:hover { background: #0771a6; }

/* ----- RESPONSIVE TABLETTE ----- */
@media (max-width: 1024px) {
  body.wcppcm-cart-styled .wcppcm-cart-layout { grid-template-columns: 1fr; gap: 24px; }
  body.wcppcm-cart-styled .wcppcm-cart-recap-sticky { position: static; }
}

/* ----- RESPONSIVE MOBILE ----- */
@media (max-width: 640px) {
  body.wcppcm-cart-styled .wcppcm-cart-wrap { padding: 16px 12px 32px; }
  body.wcppcm-cart-styled .wcppcm-cart-title { font-size: 24px; }
  body.wcppcm-cart-styled .wcppcm-cart-item { padding: 14px; }
  body.wcppcm-cart-styled .wcppcm-cart-item-body { grid-template-columns: 70px 1fr; gap: 12px; }
  body.wcppcm-cart-styled .wcppcm-cart-item-thumb-wrap { width: 70px; height: 70px; }
  body.wcppcm-cart-styled .wcppcm-cart-item-grid {
    grid-template-columns: 1fr 1fr; gap: 10px;
  }
  body.wcppcm-cart-styled .wcppcm-cart-item-cell--total { grid-column: 1 / -1; text-align: left; }
  body.wcppcm-cart-styled .wcppcm-cart-item-title { font-size: 15px; }
}

/* Suffixes HT / TTC dans le drawer FKCart (mini-panier) — discrétion + lisibilité.
   Appliqués sur les lignes natives FKCart via JS + sur nos lignes injectées (port + fees).
   Le drawer affiche du HT/TTC selon body.wcppcm-price-mode-{ht|ttc} (toggle pill). */
.wcppcm-tax-suffix {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
/* Variante TTC dans le corps du drawer (Sous-total, port, fees) — teal léger */
.wcppcm-tax-suffix--ttc {
  background: #e0f2fe;
  color: #0369a1;
}
/* Dans le bouton "Commander" (fond vert) — pill blanche translucide pour contraste */
.fkcart-checkout-btn .wcppcm-tax-suffix,
.fkcart-cart-footer .fkcart-checkout-btn .wcppcm-tax-suffix {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

/* Sélecteur pays — bloc Livraison vers : [France ▼] dans la recap */
.wcppcm_recap_country_row {
  margin-bottom: 2px;
}
.wcppcm_recap_country_select {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%230369a1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  max-width: 160px;
  transition: border-color .15s, box-shadow .15s;
}
.wcppcm_recap_country_select:hover,
.wcppcm_recap_country_select:focus {
  border-color: #0a9bcd;
  box-shadow: 0 0 0 2px rgba(10, 155, 205, .12);
  outline: none;
}

.wcppcm_recap_block_totals {
  background: #1e2a3a;
  border-bottom: none;
}

.wcppcm_recap_block_totals .wcppcm_recap_block_title {
  color: rgba(255, 255, 255, .45);
}

.wcppcm_recap_block_totals .wcppcm_recap_label {
  color: rgba(255, 255, 255, .75);
}

.wcppcm_recap_block_totals .wcppcm_recap_value {
  color: #fff;
}

html body .wcppcm_recap .wcppcm_recap_block_totals .wcppcm_recap_value--primary {
  color: #ffffff !important;
}

.wcppcm_recap_block_totals .wcppcm_recap_row {
  padding: 2px 0;
}

.wcppcm_recap_block_totals .wcppcm_recap_row_pu {
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.wcppcm_recap_row_ttc .wcppcm_recap_label {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.wcppcm_recap_row_ttc .wcppcm_recap_value {
  color: #f59e0b;
  font-weight: 700;
  font-size: 14px;
}

.wcppcm-atc-recap {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 18px;
  background-color: #22c55e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s;
}

.wcppcm-atc-recap:hover {
  background-color: #16a34a;
}

/* État désactivé : bouton ATC grisé tant qu'un marquage est sélectionné mais
   qu'aucune maquette n'est validée. Couvre les 3 sélecteurs (proxy, recap, WC natif). */
.single_add_to_cart_button.wcppcm-atc-blocked,
.wcppcm-atc-proxy.wcppcm-atc-blocked,
.wcppcm-atc-recap.wcppcm-atc-blocked {
  background-color: #cbd5e1 !important;
  color: #475569 !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  box-shadow: none !important;
  pointer-events: auto !important; /* garde le tooltip natif via title= */
}
.single_add_to_cart_button.wcppcm-atc-blocked:hover,
.wcppcm-atc-proxy.wcppcm-atc-blocked:hover,
.wcppcm-atc-recap.wcppcm-atc-blocked:hover {
  background-color: #cbd5e1 !important;
  transform: none !important;
}

/* Message d'avertissement sous le bouton ATC quand il est bloqué */
.wcppcm-atc-blocked-notice {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  animation: wcppcmAtcNoticeFadeIn 0.25s ease-out;
}
@keyframes wcppcmAtcNoticeFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wcppcm_recap_shipping {
  font-size: 11px;
  color: #475569;
  text-align: right;
}

@media (max-width: 768px) {
  .wcppcm_recap {
    margin-top: 16px;
  }
}

/* ---------- Stock ---------- */
.wcppcm-low-stock-msg {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  color: #dc2626;
}

/* ---------- MOQ ---------- */
.wcppcm_moq_notice {
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   CATALOGUE / ARCHIVE — design carte produit
   ========================================================================== */

/* Carte */
.woocommerce ul.products li.product {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid #f1f5f9 !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  overflow: hidden !important;
  /* Flex column : le bouton "Personnaliser" reste TOUJOURS en bas de la card,
     même si le contenu (pastilles couleur, méta logo/MOQ) varie en hauteur.
     Évite le décalage vertical entre cards d'une même rangée. */
  display: flex !important;
  flex-direction: column !important;
}
/* Pousse le bouton "Personnaliser" et le badge "à partir de" tout en bas */
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > .added_to_cart {
  margin-top: auto !important;
}

/* Bug K — Feedback visuel au clic sur une card produit pour masquer la latence
   serveur. Ajoute un overlay subtil + spinner pendant la navigation. */
.woocommerce ul.products li.product.wcppcm-card-loading {
  position: relative;
  pointer-events: none;
}
.woocommerce ul.products li.product.wcppcm-card-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  border-radius: 16px;
  z-index: 10;
}
.woocommerce ul.products li.product.wcppcm-card-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(10, 155, 205, 0.25);
  border-top-color: #0a9bcd;
  border-radius: 50%;
  animation: wcppcm-card-spin 0.6s linear infinite;
  z-index: 11;
}
@keyframes wcppcm-card-spin {
  to { transform: rotate(360deg); }
}
/* Titres longs : autorise le wrap propre, pas de coupure de mot brutale */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.35 !important;
  /* Min-height ≈ 2 lignes pour aligner les prix/CTA des cards avec titres 1L vs 2L */
  min-height: 2.7em;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-3px);
}

/* Badge catégorie dynamique — base */
.woocommerce ul.products li.product .custom-badge {
  display: inline-block;
  position: absolute;
  top: 14px;
  z-index: 2;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  padding: 4px 12px !important;
  border-radius: 20px;
  text-transform: uppercase;
  line-height: 1.4;
  background: #0a9bcd;
}

.woocommerce ul.products li.product .custom-badge--left {
  left: 14px;
  right: auto;
}

.woocommerce ul.products li.product .custom-badge--right {
  right: 14px;
  left: auto;
}

/* Couleur par catégorie (slug WooCommerce) */
.custom-badge.badge-bestseller,
.custom-badge.badge-bestsellers {
  background: #f59e0b !important;
}

/* or — best-seller */
.custom-badge.badge-eventails-en-bois,
.custom-badge.badge-eventails-en-bois-et-bambou {
  background: #92400e !important;
}

/* vert bambou — produits taggés "bambou" (Kronix…) */
.custom-badge.badge-bambou {
  background: #65a30d !important;
}

/* brun bois */
.custom-badge.badge-eventails-en-plastique {
  background: #2563eb !important;
}

/* bleu */
.custom-badge.badge-eventails-en-matieres-recyclees {
  background: #16a34a !important;
}

/* vert éco */
.custom-badge.badge-eventails-en-sublimation {
  background: #7c3aed !important;
}

/* violet */

/* Badge Impression Digitale (mode quadri) — dégradé rainbow distinctif */
.custom-badge.badge-quadri {
  background: linear-gradient(90deg, #ec4899 0%, #f59e0b 33%, #06b6d4 66%, #8b5cf6 100%) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Position relative sur la carte pour que le badge se positionne */
.woocommerce ul.products li.product {
  position: relative !important;
}

/* Nom du produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #1e293b !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
}

/* Prix */
.woocommerce ul.products li.product .price {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.woocommerce ul.products li.product .price .wcppcm-from-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================================
   PROMOTION PRODUIT
   Bandeau récap, prix barrés, pastille catalogue, prix dégressif barré
   ============================================================ */

/* Texte barré (utilisé par recap, tableau dégressif, catalogue) */
.wcppcm-strike {
  text-decoration: line-through;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  opacity: 0.85;
}

/* Bandeau Promotion en haut du récap */
.wcppcm_recap_promo_banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 2px solid #f59e0b;
  font-size: 12px;
  color: #92400e;
}

.wcppcm_recap_promo_pill {
  display: inline-flex;
  align-items: center;
  background: #dc2626;
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}

.wcppcm_recap_promo_label {
  font-weight: 700;
  font-size: 13px;
  color: #b45309;
}

.wcppcm_recap_promo_saved {
  margin-left: auto;
  font-size: 11px;
  color: #16a34a;
  font-weight: 700;
}

/* Tableau dégressif : prix régulier barré au-dessus du prix promo */
.wcppcm-tier-strike {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  margin-bottom: 2px;
}

.wcppcm-tier-promo {
  display: block;
  color: #dc2626;
  font-weight: 800;
}

/* ==========================================================================
   HOMEPAGE — 4 cards catégories Divi qui débordent
   Cible les modules Blurb / Image module Divi rendus en row 4 colonnes avec
   titres "Éventails en Matières Recyclées" / "Éventails Impression Digitale".
   Sans ces règles, le titre wrappe sur 2-3 lignes et le bouton "Voir les modèles"
   se décale d'une card à l'autre.

   IMPORTANT : ces règles d'égalisation sont SCOPÉES au desktop (≥769px) car
   sur mobile les cards stackent verticalement → pas besoin d'égaliser, et
   l'égalisation faisait des cards trop hautes qui poussaient le titre hors écran.
   ========================================================================== */

@media (min-width: 769px) {
  /* Égalise la hauteur des cards d'une même row (rend les colonnes flex parents) */
  .et_pb_section .et_pb_row:has(.et_pb_blurb),
  .et_pb_section .et_pb_row:has(.et_pb_image) {
    align-items: stretch;
  }

  /* Force la card (blurb/image) à occuper toute la hauteur disponible */
  .et_pb_row .et_pb_column > .et_pb_blurb,
  .et_pb_row .et_pb_column > .et_pb_image {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Le wrap interne du blurb prend l'espace, le lien "Voir les modèles" descend en bas */
  .et_pb_blurb .et_pb_blurb_container,
  .et_pb_blurb .et_pb_blurb_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .et_pb_blurb .et_pb_blurb_description {
    margin-top: auto;
  }

  /* Titres de blurb (h4 par défaut) : wrap propre + min-height ≈ 2 lignes pour
     aligner les cards avec titres courts (Éventails en Bois) vs longs (Éventails
     en Matières Recyclées). */
  .et_pb_row .et_pb_blurb .et_pb_module_header,
  .et_pb_row .et_pb_blurb h4.et_pb_module_header {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.25 !important;
    min-height: 2.6em;
  }
}

/* Mobile : compaction des cards homepage pour que le titre soit visible
   sans devoir scroller à travers une image géante. */
@media (max-width: 768px) {
  /* Image plus compacte : max 220px de haut, centrée */
  .et_pb_row .et_pb_image .et_pb_image_wrap,
  .et_pb_row .et_pb_image_wrap,
  .et_pb_row .et_pb_blurb .et_pb_main_blurb_image,
  .et_pb_row .et_pb_blurb_image {
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .et_pb_row .et_pb_image .et_pb_image_wrap img,
  .et_pb_row .et_pb_image img,
  .et_pb_row .et_pb_blurb .et_pb_main_blurb_image img,
  .et_pb_row .et_pb_blurb_image img {
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Titre catégorie : taille adaptée, wrap, line-height resserré */
  .et_pb_row .et_pb_blurb .et_pb_module_header,
  .et_pb_row .et_pb_blurb h4.et_pb_module_header,
  .et_pb_row .et_pb_text_inner h2,
  .et_pb_row .et_pb_text_inner h3,
  .et_pb_row .et_pb_text_inner h4 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Card globalement plus compacte : padding réduit */
  .et_pb_row .et_pb_column > .et_pb_blurb,
  .et_pb_row .et_pb_column > .et_pb_image {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* Masque le flash "Promo !" natif de WooCommerce sur les cartes catalogue.
   Notre plugin gère son propre affichage (libellé en rouge à côté du prix),
   le badge WC natif fait doublon. Couvre aussi les variantes Divi/thèmes. */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .et_pb_module_header .onsale,
.woocommerce ul.products li.product span.onsale {
  display: none !important;
}

/* Filet de sécurité : masque l'ancienne pastille flottante du plugin
   (`.wcppcm-card-promo-pill`) au cas où le PHP du serveur n'aurait pas
   encore été ré-uploadé. La nouvelle version affiche le libellé inline
   à côté du prix barré (cf. .wcppcm-from-promo-tag). */
.wcppcm-card-promo-pill {
  display: none !important;
}

/* Catalogue : prix "À partir de" en mode promo
   Affichage : ancien prix barré (gris, petit) au-dessus du nouveau prix
   en rouge avec le libellé de promo inline ("−25 %" ou "Soldes d'été") */
.wcppcm-from-price--promo .wcppcm-from-val {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wcppcm-from-strike {
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-bottom: 1px;
}

.wcppcm-from-val-new {
  color: #dc2626 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.wcppcm-from-promo-tag {
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Mobile : recap banner plus compact */
@media (max-width: 600px) {
  .wcppcm_recap_promo_banner {
    font-size: 11px;
    padding: 8px 12px;
  }

  .wcppcm-from-promo-tag {
    font-size: 10px !important;
  }
}

/* ============================================================
   CARTES CATALOGUE — Pastilles couleurs + Méta logo / MOQ
   Rendu par wcppcm_catalog_color_swatches() et wcppcm_catalog_meta_lines()
   ============================================================ */

/* Conteneur des pastilles de couleur (sous le titre, avant le prix) */
.wcppcm-card-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 8px 0 6px;
  line-height: 1;
}

/* Pastille de couleur unitaire */
.wcppcm-card-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  background-clip: padding-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: help;
  flex-shrink: 0;
}

.wcppcm-card-swatch:hover {
  transform: scale(1.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* Bordure plus visible pour les pastilles très claires (blanc, crème) */
.wcppcm-card-swatch[style*="#ffffff"],
.wcppcm-card-swatch[style*="#FFFFFF"],
.wcppcm-card-swatch[style*="#fef3c7"] {
  border-color: #cbd5e1;
}

/* Pastille Quadri : gradient multicolore (toutes couleurs) */
.wcppcm-card-swatch--quadri {
  background: conic-gradient(from 0deg,
      #ef4444,
      #f97316,
      #facc15,
      #22c55e,
      #06b6d4,
      #3b82f6,
      #a855f7,
      #ec4899,
      #ef4444);
  border-color: rgba(0, 0, 0, 0.25);
  position: relative;
}

.wcppcm-card-swatch--quadri::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Indicateur "+N" si plus de 8 couleurs disponibles */
.wcppcm-card-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  line-height: 1;
}

/* Liste des méta lignes : "Logo en X couleurs", "À partir de X pièces" */
.wcppcm-card-meta {
  list-style: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wcppcm-card-meta li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.wcppcm-card-meta li::before {
  content: none !important;
}

.wcppcm-card-arrow {
  color: #0a9bcd;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
}

/* Mobile : compact mais lisible */
@media (max-width: 600px) {
  .wcppcm-card-swatches {
    gap: 4px;
    margin: 6px 0 4px;
  }

  .wcppcm-card-swatch {
    width: 14px;
    height: 14px;
  }

  .wcppcm-card-swatch-more {
    min-width: 20px;
    height: 14px;
    font-size: 9px;
  }

  .wcppcm-card-meta li {
    font-size: 10px;
  }
}

/* Label texte du plugin */
.woocommerce ul.products li.product .price .wcppcm-from-label {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  text-transform: lowercase;
}

/* Cacher le label HTML du plugin partout où le thème enfant injecte déjà
   "à partir de" via ::before. Couvre :
   - la homepage (body.home)
   - les pages personnalisées avec un module Divi et_pb_shop_X (X = numéro auto-incrémenté
     par Divi : 0, 1, 2…). Le sélecteur attribut ciblerait toutes les variantes. */
body.home .woocommerce ul.products li.product .price .wcppcm-from-label,
[class*="et_pb_shop"] .woocommerce ul.products li.product .price .wcppcm-from-label {
  display: none !important;
}

.woocommerce ul.products li.product .price .wcppcm-from-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

/* Bouton Personnaliser */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
  background-color: #0a9bcd !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  margin-top: 14px !important;
  transition: background-color 0.2s !important;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: #0771a6 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   MOBILE — Cartes catalogue + bloc "À partir de" fiche produit
   ========================================================================== */

@media (max-width: 600px) {

  /* Carte produit : padding réduit pour gagner de la place utile */
  .woocommerce ul.products li.product {
    padding: 12px !important;
  }

  /* Badges : police + padding + letter-spacing réduits pour ne plus déborder.
     "BEST-SELLER" tronqué en "ELLER" → fix ici. */
  .woocommerce ul.products li.product .custom-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.04em !important;
    top: 10px !important;
  }

  .woocommerce ul.products li.product .custom-badge--left {
    left: 8px !important;
  }

  .woocommerce ul.products li.product .custom-badge--right {
    right: 8px !important;
  }

  /* Titre produit compact */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }

  /* Prix "À partir de" mobile */
  .woocommerce ul.products li.product .price .wcppcm-from-val {
    font-size: 14px !important;
  }

  /* Bouton "Personnaliser →" : nowrap + police/padding réduits.
     "Personnali / ser" cassé en deux → fix ici. */
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product .button {
    font-size: 12px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
    margin-top: 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {
  .woocommerce ul.products li.product .custom-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }
}

/* ==========================================================================
   MOBILE — Bloc "À partir de" sur fiche produit
   Stack vertical au lieu de 2 colonnes (lecture plus claire sur petit écran)
   ========================================================================== */

@media (max-width: 600px) {
  .wcppcm-from-block {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
  }

  .wcppcm-from-right {
    text-align: left;
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
  }

  .wcppcm-from-price-row {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 2px;
  }

  .wcppcm-from-moq-val {
    font-size: 15px;
    line-height: 1.3;
  }

  .wcppcm-from-label,
  .wcppcm-from-best-info,
  .wcppcm-from-moq-info {
    line-height: 1.4;
  }
}

/* ==========================================================================
   BOTTOM NAV MOBILE — barre fixe avec icônes (≤768px)
   Rendue par wcppcm_render_bottom_nav() dans wcppcm-pro.php
   ========================================================================== */

.wcppcm-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Masque la navigation Divi sur mobile — la bottom nav la remplace.
   Couvre :
   - les boutons hamburger (#mobile_menu_bar, .mobile_nav…)
   - les <ul>/<li> du menu lui-même (.nav, #top-menu, .et_pb_menu__menu…)
   - le panier header (doublon avec l'icône Panier de la bottom nav)
   Le logo et son wrap restent visibles avec leur min-height (voir blocs plus bas). */
@media (max-width: 980px) {
  /* 1) Hamburger */
  #mobile_menu_bar,
  #et_mobile_nav_menu,
  #mobile_menu,
  .et_pb_menu__menu .mobile_nav,
  .et_pb_menu_0_tb_header .mobile_nav,
  .et_pb_menu .et_mobile_nav_menu,
  .et_pb_menu .mobile_menu_bar,
  .et_pb_fullwidth_menu .mobile_nav,
  .et_pb_fullwidth_menu .et_mobile_nav_menu,
  #main-header .mobile_nav,
  #main-header #et_mobile_nav_menu,
  #et-secondary-menu .et_mobile_nav_menu,
  .et_header_style_centered #et_mobile_nav_menu,
  .et-fixed-header #et_mobile_nav_menu,
  /* 2) Menu items eux-mêmes (Divi classic + Theme Builder + Divi 5 module Menu) */
  #top-menu,
  #top-menu-nav,
  #et-top-navigation .nav,
  #main-header .nav,
  #main-header #top-menu,
  .et_pb_menu nav.et-menu-nav,
  .et_pb_menu .et-menu,
  .et_pb_menu .et_pb_menu__menu,
  .et_pb_menu_0_tb_header .et_pb_menu__menu,
  .et_pb_menu_0_tb_header nav.et-menu-nav,
  .et_pb_fullwidth_menu .et_pb_menu__menu,
  .et_pb_fullwidth_menu nav.et-menu-nav,
  /* 3) Panier header (doublon avec la bottom nav) */
  #et-top-navigation .et-cart-info,
  #main-header .et-cart-info,
  .et_pb_menu .et-cart-info,
  .et_pb_menu_0_tb_header .et-cart-info,
  .et_pb_menu__icon-search,
  .et_pb_menu_0_tb_header .et_pb_menu__icon-search {
    display: none !important;
  }

  /* Logo agrandi sur mobile (le hamburger n'est plus là pour prendre la place).
     Couvre header classique Divi + Theme Builder + Divi 5 menu module.
     max-height doublée par rapport au défaut Divi (40px → 70-80px). */
  #logo,
  #main-header #logo,
  .et_header_style_left #logo,
  .et_header_style_centered #logo,
  .et_header_style_split #logo,
  .et-fixed-header #logo,
  .logo_container img,
  .et_pb_menu__logo img,
  .et_pb_menu__logo-wrap img,
  .et_pb_menu .et_pb_menu__logo img,
  .et_pb_menu_0_tb_header .et_pb_menu__logo img,
  .et_pb_menu_0_tb_header .et_pb_menu__logo-wrap img {
    max-height: 60px !important;
    height: auto !important;
    width: auto !important;
    max-width: 160px !important;
  }

  /* Le container du logo doit suivre */
  .logo_container,
  .et_pb_menu__logo,
  .et_pb_menu__logo-wrap {
    max-height: 80px !important;
    height: auto !important;
  }

  /* CRITICAL : forcer une hauteur minimum + padding sur le wrapper du module Menu Divi.
     Sans ça, masquer la nav (qui occupait l'espace vertical) fait s'écraser le
     module → le logo déborde sur le contenu de la page.
     Padding vertical 12px → marge confortable autour du logo. */
  .et_pb_menu_0_tb_header,
  .et_pb_menu,
  .et_pb_fullwidth_menu,
  #main-header {
    min-height: 90px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Le wrap interne du module menu Divi : center le logo et lui donne de l'air */
  .et_pb_menu__wrap,
  .et_pb_menu__logo-wrap {
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sidebar shop WooCommerce : sur mobile, la sidebar (filtres, catégories,
     couleurs) doit passer en pleine largeur au lieu de rester en colonne étroite.
     Couvre les archives WC natives + les pages Divi customs (/tous-nos-modeles)
     qui contiennent un module shop (.et_pb_shop) ou des widgets WC. */
  .woocommerce.archive .et_pb_column,
  .post-type-archive-product .et_pb_column,
  .tax-product_cat .et_pb_column,
  .tax-product_tag .et_pb_column,
  .et_pb_section:has(.et_pb_shop) .et_pb_column,
  .et_pb_section:has(.et_pb_widget_area) .et_pb_column,
  .et_pb_section:has(.widget_price_filter) .et_pb_column,
  .et_pb_section:has(.widget_product_categories) .et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Force la grille produits en 1 COLONNE pleine largeur sur mobile.
     Couvre toutes les variantes : pages catégorie WC natives (.woocommerce.archive,
     .tax-product_cat), pages Divi avec module shop (.et_pb_shop ul.products),
     pages /tous-nos-modeles, etc.
     Empêche aussi les colonnes 2/3/4 que WooCommerce pourrait définir via classes. */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4,
  .et_pb_shop ul.products,
  .et_pb_module ul.products {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 18px !important;
    padding: 0 !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .et_pb_shop ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
  /* Sécurité : annule les pseudo-clearfix WC qui créent des trous dans le grid */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after,
  .woocommerce-page ul.products::before,
  .woocommerce-page ul.products::after {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
   FIX : masque le bouton ATC natif WC quand le bouton ATC du
   récap est présent (sinon doublon — celui du récap + le natif vert).
   Utilise :has() (Safari iOS 15.4+, Chrome 105+, Firefox 121+).
   Filet de sécurité indépendant du JS qui peut échouer si la page
   se rend en plusieurs étapes.
   ============================================================ */
form.cart:has(.wcppcm-atc-recap) .single_add_to_cart_button:not(.wcppcm-atc-recap):not(.wcppcm-atc-proxy),
.wcppcm_form_wrap:has(.wcppcm-atc-recap) ~ form.cart .single_add_to_cart_button:not(.wcppcm-atc-recap):not(.wcppcm-atc-proxy),
body.single-product:has(.wcppcm-atc-recap) form.cart .single_add_to_cart_button:not(.wcppcm-atc-recap):not(.wcppcm-atc-proxy) {
    display: none !important;
}

/* ============================================================
   CARDS CATALOGUE — Titre allongé (3 lignes max au lieu de 2)
   S'applique à tous les viewports (desktop + mobile)
   Spécificité boostée avec `html body` + double-classes pour battre
   l'override du CSS perso `.et_pb_shop_0` (5 classes specificity).
   ============================================================ */
html body .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
html body .woocommerce ul.products li.product h3.woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product h3.woocommerce-loop-product__title,
html body .et_pb_shop ul.products li.product h2.woocommerce-loop-product__title,
html body .et_pb_shop ul.products li.product h3.woocommerce-loop-product__title,
html body .et_pb_shop_0 ul.products li.product h2.woocommerce-loop-product__title,
html body .et_pb_shop_0 ul.products li.product h3.woocommerce-loop-product__title,
html body .et_pb_module ul.products li.product h2.woocommerce-loop-product__title,
html body .et_pb_module ul.products li.product h3.woocommerce-loop-product__title {
  min-height: 4.5em !important; /* réserve 3 lignes (avec font-size 15px) */
  max-height: none !important; /* pas de plafond */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
  word-break: break-word !important;
}

/* Force la card flex column avec hauteur min pour aérer */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.et_pb_shop ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
/* Le bouton "Personnaliser →" et meta poussés en bas avec auto-margin */
.woocommerce ul.products li.product .btn-devis-card,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart,
.et_pb_shop ul.products li.product .btn-devis-card {
  margin-top: auto !important;
}

/* Re-ouvre l'imbrication de la @media originale (max-width: 980px) qui contient
   les règles sidebar shop responsive (.et_pb_row:has(...), widgets WC, etc.).
   On avait fermé cette media avec un } pour insérer les règles cards globales. */
@media (max-width: 980px) {

  /* Force le stacking vertical des rows contenant un shop ou des widgets WC.
     Certains rows Divi sont configurés "make_fullwidth" et gardent leur
     flex horizontal sur mobile au lieu de stacker leurs colonnes. */
  .et_pb_row:has(.et_pb_shop),
  .et_pb_row:has(.widget_price_filter),
  .et_pb_row:has(.widget_product_categories),
  .et_pb_row:has(.et_pb_widget_area) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Widgets shop (filtre prix, catégories, attributs couleurs) en pleine largeur */
  .widget_price_filter,
  .widget_product_categories,
  .widget_layered_nav,
  .widget_layered_nav_filters,
  .et_pb_widget_area,
  .et_pb_widget {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Corrige les titres de widget qui cassent en plein milieu d'un mot
     ("Catégori es de produits", "Produit Couleur s"). Sans wrap forcé. */
  .widget .widgettitle,
  .widget h2,
  .widget h3,
  .et_pb_widget .widgettitle,
  .et_pb_widget h2,
  .et_pb_widget h3 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: none !important;
  }
}

/* Très petit écran : on garde une taille raisonnable */
@media (max-width: 380px) {
  #logo,
  .logo_container img,
  .et_pb_menu__logo img,
  .et_pb_menu__logo-wrap img {
    max-height: 48px !important;
    max-width: 140px !important;
  }
  .et_pb_menu_0_tb_header,
  .et_pb_menu,
  .et_pb_fullwidth_menu,
  #main-header {
    min-height: 68px !important;
  }
  .et_pb_menu__wrap,
  .et_pb_menu__logo-wrap {
    min-height: 60px !important;
  }
}

.wcppcm-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  text-decoration: none !important;
  color: #475569 !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.15s;
  min-height: 56px;
}

.wcppcm-bottom-nav__item:hover,
.wcppcm-bottom-nav__item:focus {
  color: #0a9bcd !important;
  text-decoration: none !important;
  outline: none;
}

.wcppcm-bottom-nav__item.is-active {
  color: #0a9bcd !important;
}

.wcppcm-bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.wcppcm-bottom-nav__icon {
  width: 24px;
  height: 24px;
  display: block;
}

.wcppcm-bottom-nav__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* Badge compteur panier (rouge) */
.wcppcm-bottom-nav__cart-count {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
  box-sizing: border-box;
}

.wcppcm-bottom-nav__cart-count--active {
  display: inline-block;
}

/* Affichage uniquement mobile + tablette */
@media (max-width: 768px) {
  .wcppcm-bottom-nav {
    display: flex;
  }

  /* Espace en bas du body pour ne pas masquer le contenu derrière la barre */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* Quand le modal configurateur est ouvert, le scroll body est bloqué :
     pas de padding-bottom utile (le modal couvre tout en z-index max) */
  body.wcppcm-modal-open {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   DRAWER CATALOGUE — slide-up sur tap "Catalogue" dans la bottom nav
   ========================================================================== */

.wcppcm-cat-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wcppcm-cat-drawer.is-open {
  pointer-events: auto;
}

.wcppcm-cat-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.wcppcm-cat-drawer.is-open .wcppcm-cat-drawer__backdrop {
  opacity: 1;
}

.wcppcm-cat-drawer__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  -webkit-overflow-scrolling: touch;
}

.wcppcm-cat-drawer.is-open .wcppcm-cat-drawer__panel {
  transform: translateY(0);
}

/* Petite "poignée" visuelle au sommet du panel */
.wcppcm-cat-drawer__handle {
  width: 40px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 8px auto 0;
}

.wcppcm-cat-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 14px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.wcppcm-cat-drawer__title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.wcppcm-cat-drawer__close {
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wcppcm-cat-drawer__close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.wcppcm-cat-drawer__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 8px !important;
}

.wcppcm-cat-drawer__list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.wcppcm-cat-drawer__list li::before {
  content: none !important;
}

.wcppcm-cat-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
  min-height: 56px;
}

.wcppcm-cat-drawer__item:last-child {
  border-bottom: none;
}

.wcppcm-cat-drawer__item:hover,
.wcppcm-cat-drawer__item:focus {
  background: #f8fafc;
  text-decoration: none !important;
  color: #1e293b !important;
  outline: none;
}

.wcppcm-cat-drawer__dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Couleurs identitaires des catégories (alignées sur les badges du catalogue) */
.wcppcm-cat-drawer__dot[data-slug="all"] {
  background: #0a9bcd;
}

.wcppcm-cat-drawer__dot[data-slug="bestsellers"] {
  background: #f59e0b;
}

.wcppcm-cat-drawer__dot[data-slug="eventails-en-bois"],
.wcppcm-cat-drawer__dot[data-slug="eventails-en-bois-et-bambou"] {
  background: #92400e;
}

.wcppcm-cat-drawer__dot[data-slug="eventails-en-plastique"] {
  background: #2563eb;
}

.wcppcm-cat-drawer__dot[data-slug="eventails-en-matieres-recyclees"] {
  background: #16a34a;
}

.wcppcm-cat-drawer__dot[data-slug="eventails-en-sublimation"] {
  background: #7c3aed;
}

.wcppcm-cat-drawer__name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.wcppcm-cat-drawer__count {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.wcppcm-cat-drawer__arrow {
  color: #cbd5e1;
  font-size: 22px;
  margin-left: 4px;
  line-height: 1;
}

/* Bloque le scroll de la page quand le drawer est ouvert */
body.wcppcm-cat-drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   APERÇU MAQUETTE BAT — image cliquable + modal lightbox
   ========================================================================== */

/* Image cliquable (vignette dans le bloc preview) */
.wcppcm-mockup-image-btn {
  position: relative;
  display: inline-block;
  background: #ffffff;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: zoom-in;
  margin: 0 auto;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  font: inherit;
  color: inherit;
}
.wcppcm-mockup-image-btn:hover,
.wcppcm-mockup-image-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(10, 155, 205, 0.18);
  border-color: #0a9bcd;
  outline: none;
}
.wcppcm-mockup-image-btn img {
  display: block;
  max-height: 200px;
  width: auto;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Petite pastille loupe au survol (overlay coin haut-droit) */
.wcppcm-mockup-zoom-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: rgba(10, 155, 205, 0.95);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(10, 155, 205, 0.35);
}
.wcppcm-mockup-image-btn:hover .wcppcm-mockup-zoom-badge,
.wcppcm-mockup-image-btn:focus-visible .wcppcm-mockup-zoom-badge {
  opacity: 1;
  transform: scale(1);
}

.wcppcm-mockup-hint {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  text-align: center;
}

/* Note dynamique sous le bloc "Délais de livraison" (shipping-tiers,
   champ "Note" par fournisseur). Style autonome (le bloc .delais lui-même
   est stylé dans le CSS perso du thème). */
.delais .delais-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
  color: #475569;
}

/* ---------- MODAL LIGHTBOX ---------- */

.wcppcm-mockup-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wcppcm-mockup-modal.is-open {
  pointer-events: auto;
}

.wcppcm-mockup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wcppcm-mockup-modal.is-open .wcppcm-mockup-modal__backdrop {
  opacity: 1;
}

.wcppcm-mockup-modal__panel {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  max-width: min(900px, 95vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5);
}
.wcppcm-mockup-modal.is-open .wcppcm-mockup-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.wcppcm-mockup-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #475569;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s, color 0.18s, background 0.18s, border-color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wcppcm-mockup-modal__close:hover {
  transform: rotate(90deg);
  color: #1e293b;
  border-color: #cbd5e1;
}

.wcppcm-mockup-modal__image-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  overflow: hidden;
  min-height: 220px;
  padding: 28px;
}
.wcppcm-mockup-modal__image {
  max-width: 100%;
  max-height: calc(92vh - 130px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
}

.wcppcm-mockup-modal__actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- BOUTONS BAT (lightbox) — couleurs du thème ---------- */

.wcppcm-bat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.wcppcm-bat-btn svg {
  flex-shrink: 0;
}

/* Primary : bleu/teal du thème (#0a9bcd), comme le bouton "Personnaliser" */
.wcppcm-bat-btn--primary {
  background: #0a9bcd;
  color: #ffffff !important;
  border: 1.5px solid #0a9bcd;
  box-shadow: 0 2px 8px rgba(10, 155, 205, 0.32);
}
.wcppcm-bat-btn--primary:hover {
  background: #0771a6;
  border-color: #0771a6;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(10, 155, 205, 0.42);
  color: #ffffff !important;
}

/* Secondary : outline teal — pour "Modifier" (action moins prioritaire) */
.wcppcm-bat-btn--secondary {
  background: #ffffff;
  color: #0a9bcd !important;
  border: 1.5px solid #0a9bcd;
}
.wcppcm-bat-btn--secondary:hover {
  background: #e0f2fe;
  border-color: #0771a6;
  color: #0771a6 !important;
  transform: translateY(-1px);
}

/* Bloque le scroll de la page quand le modal est ouvert */
body.wcppcm-mockup-modal-open {
  overflow: hidden !important;
}

/* Mobile : actions en colonne pour confort tactile */
@media (max-width: 600px) {
  .wcppcm-mockup-modal {
    padding: 12px;
  }
  .wcppcm-mockup-modal__actions {
    flex-direction: column;
    gap: 8px;
  }
  .wcppcm-bat-btn {
    width: 100%;
    justify-content: center;
  }
  .wcppcm-mockup-modal__image-wrap {
    padding: 16px;
  }
  .wcppcm-mockup-modal__image {
    max-height: calc(92vh - 200px);
  }
}

/* ==========================================================================
   TOGGLE HT / TTC + DUAL RENDERING
   Pill flottante en haut à droite. Bascule la classe body.wcppcm-price-mode-*
   qui montre/masque la bonne version des prix rendus en double dans le HTML.
   ========================================================================== */

/* Sélecteurs sur-spécifiques (html body .wcppcm-tax-toggle ...) pour battre
   d'éventuelles règles Divi / thème enfant qui auraient !important. */

/* Le toggle HT/TTC n'a aucun sens sur le checkout et la page de confirmation
   de commande : ces pages affichent déjà la ventilation HT + TVA + TTC en
   lignes séparées et le client s'engage sur le TTC (binding contractuel).
   On masque le toggle pour éviter un bouton qui ressemble actif mais ne
   modifie rien (le tableau WC n'a pas les classes .wcppcm-price-ht/.ttc). */
body.woocommerce-checkout .wcppcm-tax-toggle,
body.wcppcm-checkout-styled .wcppcm-tax-toggle,
body.wcppcm-thankyou-styled .wcppcm-tax-toggle,
body.woocommerce-order-received .wcppcm-tax-toggle,
/* On masque aussi quand le drawer catalogue ou le configurateur modal
   est ouvert (sinon le toggle z-index:99999 passe par-dessus le drawer
   et le configurateur, ce qui crée un conflit visuel). */
body.wcppcm-cat-drawer-open .wcppcm-tax-toggle,
body.wcppcm-modal-open .wcppcm-tax-toggle {
  display: none !important;
}

html body .wcppcm-tax-toggle {
  position: fixed !important;
  /* Position par défaut desktop : bas-droite (au-dessus de la bottom nav
     si elle est visible — sinon collé en bas). Cohérent avec mobile,
     évite le conflit avec le menu Divi qui varie entre pages. */
  top: auto !important;
  bottom: 24px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f59e0b !important;
  border-radius: 999px !important;
  padding: 3px 4px 3px 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Variante INLINE : rendu via le shortcode [wcppcm_price_toggle] (header Divi,
   module Texte…). On annule le positionnement fixe pour que le toggle se place
   dans le flux normal, là où le shortcode est inséré (ex. header sticky → reste
   en haut). Spécificité (0,2,2) + !important pour battre aussi les media queries
   plus bas qui repositionnent le toggle flottant en bas sur mobile. */
html body .wcppcm-tax-toggle.wcppcm-tax-toggle--inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Variante HEADER (barre secondaire Divi #et-secondary-menu, barre fine) :
   compacte, alignée verticalement, sans grosse ombre, légèrement détachée
   des éléments voisins (panier / Mon compte). */
html body .wcppcm-tax-toggle.wcppcm-tax-toggle--inline.wcppcm-tax-toggle--header {
  padding: 2px 3px 2px 8px !important;
  margin: 0 18px 0 40px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  vertical-align: middle !important;
}
html body .wcppcm-tax-toggle--header .wcppcm-tax-toggle__icon {
  font-size: 12px !important;
}
html body .wcppcm-tax-toggle--header .wcppcm-tax-toggle__btn {
  padding: 3px 9px !important;
  font-size: 11px !important;
}

/* Variante HEADER : injectée par le plugin dans le menu principal Divi natif
   (élément <li class="wcppcm-tax-toggle-li">). On centre verticalement le
   toggle dans la barre de menu et on neutralise le style de lien Divi. */
li.wcppcm-tax-toggle-li,
#top-menu li.wcppcm-tax-toggle-li,
#et-secondary-menu li.wcppcm-tax-toggle-li,
#top-menu-nav li.wcppcm-tax-toggle-li,
.et_pb_menu li.wcppcm-tax-toggle-li,
.nav li.wcppcm-tax-toggle-li {
  display: flex !important;
  align-items: center !important;
  padding: 0 0 0 14px !important;
  margin: 0 !important;
  background: none !important;
  list-style: none !important;
  float: none !important;
}
li.wcppcm-tax-toggle-li::before,
li.wcppcm-tax-toggle-li::after {
  display: none !important;
  content: none !important;
}

/* Desktop (>980px) : si une variante --header est présente dans la page
   (injection réussie), on masque la pastille flottante bas-droite — sinon
   (injection absente) la pastille flottante reste affichée (repli sûr). */
@media (min-width: 981px) {
  body:has(.wcppcm-tax-toggle--header) .wcppcm-tax-toggle:not(.wcppcm-tax-toggle--inline) {
    display: none !important;
  }
}

/* Mobile (≤980px) : le menu principal Divi est replié (hamburger masqué chez
   nous, remplacé par la bottom-nav) → on masque la variante header et on
   laisse la pastille flottante (positionnée plus bas dans ce fichier). */
@media (max-width: 980px) {
  html body .wcppcm-tax-toggle--header {
    display: none !important;
  }
}

html body .wcppcm-tax-toggle .wcppcm-tax-toggle__icon {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-right: 2px !important;
  user-select: none !important;
  background: transparent !important;
}

html body .wcppcm-tax-toggle .wcppcm-tax-toggle__btn,
html body .wcppcm-tax-toggle button.wcppcm-tax-toggle__btn {
  padding: 5px 11px !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  border-radius: 999px !important;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

html body .wcppcm-tax-toggle .wcppcm-tax-toggle__btn:hover:not(.is-active),
html body .wcppcm-tax-toggle button.wcppcm-tax-toggle__btn:hover:not(.is-active) {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #0a9bcd !important;
}

html body .wcppcm-tax-toggle .wcppcm-tax-toggle__btn.is-active,
html body .wcppcm-tax-toggle button.wcppcm-tax-toggle__btn.is-active {
  background: #0a9bcd !important;
  background-color: #0a9bcd !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(10, 155, 205, 0.4) !important;
}

/* Mobile/tablette ≤980px : repositionne le toggle HT/TTC pour qu'il soit
   au-dessus de la bottom nav mobile (~64px de haut + safe-area iOS). */
@media (max-width: 980px) {
  html body .wcppcm-tax-toggle {
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    right: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 2px 3px 2px 8px !important;
    /* Ombre + bordure renforcées pour rester lisible sur n'importe quel
       fond (footer navy, hero bleu, photo produit blanche…). */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
  }
  html body .wcppcm-tax-toggle .wcppcm-tax-toggle__icon {
    font-size: 11px !important;
  }
  html body .wcppcm-tax-toggle .wcppcm-tax-toggle__btn {
    padding: 4px 9px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   HEADER DIVI — icône "bonhomme" devant "Mon compte" (header secondaire)
   ========================================================================== */
/* On cible les liens "Mon compte" dans le menu secondaire Divi (le top bar
   avec "Service commercial" + "Se déconnecter | Mon compte"). On ajoute une
   icône SVG inline via ::before sur le <a> contenant /mon-compte/. */
#et-secondary-menu a[href*="/mon-compte"]::before,
#et-secondary-nav a[href*="/mon-compte"]::before,
.et_pb_menu_0_tb_header a[href*="/mon-compte"]::before,
#top-header a[href*="/mon-compte"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Pareil pour le lien "Se déconnecter" */
#et-secondary-menu a[href*="customer-logout"]::before,
#et-secondary-menu a[href*="?wp_logout"]::before,
#et-secondary-nav a[href*="customer-logout"]::before,
.et_pb_menu_0_tb_header a[href*="customer-logout"]::before,
#top-header a[href*="customer-logout"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 768px) {
  html body .wcppcm-tax-toggle {
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    right: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 3px 3px 3px 8px !important;
  }

  html body .wcppcm-tax-toggle .wcppcm-tax-toggle__icon {
    font-size: 12px !important;
  }

  html body .wcppcm-tax-toggle .wcppcm-tax-toggle__btn {
    padding: 4px 9px !important;
    font-size: 11px !important;
  }
}

/* Dual rendering : afficher uniquement la version correspondant au mode actif.
   Les 2 spans (.wcppcm-price-ttc + .wcppcm-price-ht) sont toujours présents
   dans le HTML rendu par le plugin (PHP ou JS), seul l'affichage est swappé. */
body.wcppcm-price-mode-ttc .wcppcm-price-ht {
  display: none;
}

body.wcppcm-price-mode-ht .wcppcm-price-ttc {
  display: none;
}

/* Sécurité : si jamais le body class manque (cookie absent + plugin pas chargé),
   on défaut TTC (cache la version HT). */
body:not(.wcppcm-price-mode-ht):not(.wcppcm-price-mode-ttc) .wcppcm-price-ht {
  display: none;
}

/* ==========================================================================
   CHECKOUT — Refonte complète alignée sur le design system du site
   Couleurs : teal #0a9bcd / navy #1e2a3a / fond #f5f9fa / cards blanches
   Scope : body.wcppcm-checkout-styled (ajouté par WCPPCM_Checkout)
   Conformité facturation électronique 2026/2027.
   ========================================================================== */

/* --- Container global : background neutre, espace respiré --- */
body.wcppcm-checkout-styled .woocommerce-checkout {
  background: #f5f9fa;
  padding: 0 0 60px;
}
body.wcppcm-checkout-styled .woocommerce-form-coupon-toggle,
body.wcppcm-checkout-styled #customer_details,
body.wcppcm-checkout-styled .woocommerce-checkout-review-order,
body.wcppcm-checkout-styled .woocommerce-checkout-payment {
  max-width: none;
}

/* Méta articles du récap checkout (Livraison estimée, Image de fond, etc.) :
   WooCommerce/thème les rend en gris clair peu lisible → on les fonce. */
body.wcppcm-checkout-styled .woocommerce-checkout-review-order .cart_item .product-name dl.variation,
body.wcppcm-checkout-styled .woocommerce-checkout-review-order .cart_item .product-name dl.variation dt,
body.wcppcm-checkout-styled .woocommerce-checkout-review-order .cart_item .product-name dl.variation dd,
body.wcppcm-checkout-styled .woocommerce-checkout-review-order .cart_item .product-name dl.variation p,
body.wcppcm-checkout-styled .woocommerce-checkout-review-order .cart_item .product-name small {
  color: #475569 !important;
  opacity: 1 !important;
}

/* --- Sections principales en cards --- */
body.wcppcm-checkout-styled .woocommerce-billing-fields,
body.wcppcm-checkout-styled .woocommerce-shipping-fields,
body.wcppcm-checkout-styled .woocommerce-additional-fields,
body.wcppcm-checkout-styled #order_review_heading,
body.wcppcm-checkout-styled #order_review {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-checkout-styled #order_review_heading {
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
body.wcppcm-checkout-styled #order_review {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  border-top: 1px solid #eef2f7;
  padding-top: 0;
}

/* --- Titres de section --- */
body.wcppcm-checkout-styled .woocommerce-billing-fields > h3,
body.wcppcm-checkout-styled .woocommerce-shipping-fields > h3,
body.wcppcm-checkout-styled #order_review_heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em;
  border: none;
  padding: 0;
}
body.wcppcm-checkout-styled .woocommerce-billing-fields > h3::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a9bcd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M2 8h20'/%3E%3Cpath d='M6 14h4'/%3E%3Cpath d='M6 17h7'/%3E%3C/svg%3E") center/18px 18px no-repeat,
    linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}
body.wcppcm-checkout-styled .woocommerce-shipping-fields > h3::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a9bcd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") center/18px 18px no-repeat,
    linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}
body.wcppcm-checkout-styled #order_review_heading::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/18px 18px no-repeat,
    linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

/* --- Labels & champs : système typographique uniforme --- */
body.wcppcm-checkout-styled .woocommerce form .form-row {
  margin-bottom: 16px;
}
body.wcppcm-checkout-styled .woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.wcppcm-checkout-styled .woocommerce form .form-row .required {
  color: #ef4444;
  text-decoration: none;
}
body.wcppcm-checkout-styled .woocommerce form .form-row input.input-text,
body.wcppcm-checkout-styled .woocommerce form .form-row textarea,
body.wcppcm-checkout-styled .woocommerce form .form-row select,
body.wcppcm-checkout-styled .select2-container--default .select2-selection--single {
  width: 100%;
  padding: 11px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 44px;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.wcppcm-checkout-styled .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  color: #0f172a !important;
  line-height: 22px !important;
}
body.wcppcm-checkout-styled .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 10px;
}
body.wcppcm-checkout-styled .woocommerce form .form-row input.input-text:focus,
body.wcppcm-checkout-styled .woocommerce form .form-row textarea:focus,
body.wcppcm-checkout-styled .woocommerce form .form-row select:focus,
body.wcppcm-checkout-styled .select2-container--default.select2-container--focus .select2-selection--single {
  outline: none !important;
  border-color: #0a9bcd !important;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.15) !important;
}
body.wcppcm-checkout-styled .woocommerce form .form-row input.input-text::placeholder,
body.wcppcm-checkout-styled .woocommerce form .form-row textarea::placeholder {
  color: #94a3b8;
}

/* --- Champs B2B masqués par défaut (toggle JS) --- */
body.wcppcm-checkout-styled .wcppcm-b2b-field.wcppcm-b2b-hidden,
body.wcppcm-checkout-styled .woocommerce form .form-row.wcppcm-b2b-field.wcppcm-b2b-hidden {
  display: none !important;
}

/* --- Layout grid avec placement explicite par ID ---
   Approche 100% déterministe : chaque champ est positionné par grid-column
   et grid-row via son ID. Peu importe l'ordre DOM, les champs apparaissent
   à la bonne place. Compatible Divi, FunnelKit, et toutes les surcharges de
   priorité plugin qui pourraient casser le pairing first/last. */
body.wcppcm-checkout-styled .woocommerce-billing-fields__field-wrapper,
body.wcppcm-checkout-styled .woocommerce-shipping-fields__field-wrapper,
body.wcppcm-checkout-styled .woocommerce-additional-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  overflow: visible !important;
}
/* Wide / customer type : full width */
body.wcppcm-checkout-styled .woocommerce-billing-fields .form-row.form-row-wide,
body.wcppcm-checkout-styled .woocommerce-shipping-fields .form-row.form-row-wide,
body.wcppcm-checkout-styled .woocommerce-additional-fields .form-row.form-row-wide,
body.wcppcm-checkout-styled .wcppcm-customer-type-wrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}
/* Champs pairés first/last */
body.wcppcm-checkout-styled .woocommerce-billing-fields .form-row.form-row-first,
body.wcppcm-checkout-styled .woocommerce-shipping-fields .form-row.form-row-first {
  grid-column: 1;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
body.wcppcm-checkout-styled .woocommerce-billing-fields .form-row.form-row-last,
body.wcppcm-checkout-styled .woocommerce-shipping-fields .form-row.form-row-last {
  grid-column: 2;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
/* Filet de sécurité par ID : placement explicite par grid-row pour les paires
   sensibles (Prénom/Nom + SIRET/TVA + Ville/Code postal). Garantit qu'un
   plugin/thème ne pourra pas casser le pairing visuel même s'il réordonne le DOM. */
body.wcppcm-checkout-styled #billing_first_name_field {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body.wcppcm-checkout-styled #billing_last_name_field {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body.wcppcm-checkout-styled #billing_company_field {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}
body.wcppcm-checkout-styled #billing_siret_field {
  grid-column: 1 !important;
  grid-row: 3 !important;
}
body.wcppcm-checkout-styled #billing_vat_number_field {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

/* --- Type de client : toggle Particulier / Entreprise (rendu HTML custom) --- */
body.wcppcm-checkout-styled .form-row.wcppcm-customer-type-wrap {
  margin-bottom: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
}
body.wcppcm-checkout-styled .wcppcm-customer-type-label {
  display: block !important;
  margin-bottom: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.wcppcm-checkout-styled .wcppcm-customer-type-wrap .wcppcm-customer-type-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Card cliquable (le <label> englobe l'input radio caché + icône + texte).
   Sélecteur compound forcé pour battre la règle .form-row label de Divi/WC. */
body.wcppcm-checkout-styled .wcppcm-customer-type-wrap label.wcppcm-customer-type-option,
body.wcppcm-checkout-styled .wcppcm-customer-type-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  padding: 16px 18px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.18s ease !important;
  margin: 0 !important;
  min-height: 60px !important;
  user-select: none;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.wcppcm-checkout-styled .wcppcm-customer-type-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}
/* Cache le radio natif tout en restant accessible clavier */
body.wcppcm-checkout-styled .wcppcm-customer-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body.wcppcm-checkout-styled .wcppcm-customer-type-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  transition: color 0.18s;
}
body.wcppcm-checkout-styled .wcppcm-customer-type-option__label {
  line-height: 1.2;
}
/* État actif (classe ajoutée côté PHP + JS) */
body.wcppcm-checkout-styled .wcppcm-customer-type-option.is-active {
  border-color: #0a9bcd;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  color: #0c4a6e !important;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.12), 0 4px 12px -2px rgba(10, 155, 205, 0.18);
  transform: translateY(0);
}
body.wcppcm-checkout-styled .wcppcm-customer-type-option.is-active .wcppcm-customer-type-option__icon {
  color: #0a9bcd;
}
/* Focus clavier accessible */
body.wcppcm-checkout-styled .wcppcm-customer-type-option input[type="radio"]:focus-visible + .wcppcm-customer-type-option__icon,
body.wcppcm-checkout-styled .wcppcm-customer-type-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #0a9bcd;
  outline-offset: 2px;
}

/* --- Validation inline (SIRET / TVA) --- */
body.wcppcm-checkout-styled .wcppcm-input-valid {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
}
body.wcppcm-checkout-styled .wcppcm-input-invalid {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}
body.wcppcm-checkout-styled .wcppcm-field-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  animation: wcppcmFadeIn 0.2s ease;
}
body.wcppcm-checkout-styled .wcppcm-field-feedback--valid {
  color: #15803d;
}
body.wcppcm-checkout-styled .wcppcm-field-feedback--invalid {
  color: #b91c1c;
}
@keyframes wcppcmFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.wcppcm-checkout-styled .wcppcm-siret-field input,
body.wcppcm-checkout-styled .wcppcm-vat-field input {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  letter-spacing: 0.04em;
}

/* --- Toggle "Expédier à une adresse différente ?" --- */
body.wcppcm-checkout-styled .woocommerce-shipping-fields h3#ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px !important;
  padding: 0;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer;
}
body.wcppcm-checkout-styled .woocommerce-shipping-fields h3#ship-to-different-address::before {
  display: none; /* on n'a pas besoin du picto h3 ici, on en a un dans le label */
}
body.wcppcm-checkout-styled h3#ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0a9bcd;
  cursor: pointer;
}

/* --- Notices WooCommerce (info / success / error / warning) sur checkout + thankyou ---
   Spécificité boostée html body + !important pour battre Divi / WC core qui appliquent
   un fond teal foncé peu lisible. On utilise un style "soft" : fond clair coloré,
   texte foncé, liseré gauche fort — contraste WCAG AA garanti. */

html body.wcppcm-checkout-styled .woocommerce-info,
html body.wcppcm-thankyou-styled .woocommerce-info,
html body.wcppcm-checkout-styled .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-left: 4px solid #0a9bcd !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  color: #0c4a6e !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 18px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html body.wcppcm-checkout-styled .woocommerce-info::before,
html body.wcppcm-thankyou-styled .woocommerce-info::before {
  color: #0a9bcd !important;
}
html body.wcppcm-checkout-styled .woocommerce-info a,
html body.wcppcm-thankyou-styled .woocommerce-info a {
  color: #0a9bcd !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
html body.wcppcm-checkout-styled .woocommerce-info a:hover,
html body.wcppcm-thankyou-styled .woocommerce-info a:hover {
  color: #0771a6 !important;
  text-decoration: none !important;
}

/* Success (vert) — ex: "Coupon appliqué" */
html body.wcppcm-checkout-styled .woocommerce-message,
html body.wcppcm-thankyou-styled .woocommerce-message {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #16a34a !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  color: #14532d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 18px !important;
}
html body.wcppcm-checkout-styled .woocommerce-message::before,
html body.wcppcm-thankyou-styled .woocommerce-message::before {
  color: #16a34a !important;
}
html body.wcppcm-checkout-styled .woocommerce-message a,
html body.wcppcm-thankyou-styled .woocommerce-message a {
  color: #15803d !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Error (rouge) — ex: "Session expirée", validation, qty > max */
html body.wcppcm-checkout-styled .woocommerce-error,
html body.wcppcm-thankyou-styled .woocommerce-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  color: #7f1d1d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 18px !important;
  list-style: none !important;
}
html body.wcppcm-checkout-styled .woocommerce-error li,
html body.wcppcm-thankyou-styled .woocommerce-error li {
  color: #7f1d1d !important;
  margin: 0 !important;
  padding: 2px 0 !important;
}
html body.wcppcm-checkout-styled .woocommerce-error::before,
html body.wcppcm-thankyou-styled .woocommerce-error::before {
  color: #dc2626 !important;
}
html body.wcppcm-checkout-styled .woocommerce-error a,
html body.wcppcm-thankyou-styled .woocommerce-error a {
  color: #dc2626 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
html body.wcppcm-checkout-styled .woocommerce-error a:hover,
html body.wcppcm-thankyou-styled .woocommerce-error a:hover {
  color: #991b1b !important;
}
body.wcppcm-checkout-styled .checkout_coupon {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
}
body.wcppcm-checkout-styled .checkout_coupon .button {
  background: #0a9bcd !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background 0.15s;
}
body.wcppcm-checkout-styled .checkout_coupon .button:hover {
  background: #0771a6 !important;
}

/* --- Tableau Votre commande --- */
body.wcppcm-checkout-styled table.shop_table {
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
}
body.wcppcm-checkout-styled table.shop_table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body.wcppcm-checkout-styled table.shop_table tbody td,
body.wcppcm-checkout-styled table.shop_table tfoot td,
body.wcppcm-checkout-styled table.shop_table tfoot th {
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #0f172a !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  vertical-align: top !important;
}

/* Bouton × pour retirer un produit du récap checkout */
.wcppcm-checkout-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  padding: 0;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 50%;
  color: #dc2626;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
  font-family: inherit;
}
.wcppcm-checkout-remove:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  transform: scale(1.1);
}
.wcppcm-checkout-remove:disabled {
  cursor: not-allowed;
}
body.wcppcm-checkout-styled table.shop_table tfoot th {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 12px !important;
}
body.wcppcm-checkout-styled table.shop_table tfoot tr.order-total th,
body.wcppcm-checkout-styled table.shop_table tfoot tr.order-total td {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-bottom: none !important;
  padding: 12px !important;
}
body.wcppcm-checkout-styled table.shop_table tfoot tr.order-total td .amount,
body.wcppcm-checkout-styled table.shop_table tfoot tr.order-total td bdi {
  color: #c2410c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
body.wcppcm-checkout-styled .product-name {
  font-weight: 600;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
/* Détails additionnels (Base / Marquage / "Modifier ma personnalisation" / atelier_data)
   On cible AUSSI les dt/dd (variation) et les li (wc-item-meta) + leurs enfants,
   sinon la VALEUR de la meta (ex "entre le 11 et le 17 juin") garde la taille par
   défaut de Divi et ressort plus grosse que le reste. */
body.wcppcm-checkout-styled #order_review .product-name dl,
body.wcppcm-checkout-styled #order_review .product-name dl dt,
body.wcppcm-checkout-styled #order_review .product-name dl dd,
body.wcppcm-checkout-styled #order_review .product-name dl dd p,
body.wcppcm-checkout-styled #order_review .product-name .variation,
body.wcppcm-checkout-styled #order_review .product-name .variation dt,
body.wcppcm-checkout-styled #order_review .product-name .variation dd,
body.wcppcm-checkout-styled #order_review .product-name .wc-item-meta,
body.wcppcm-checkout-styled #order_review .product-name .wc-item-meta li,
body.wcppcm-checkout-styled #order_review .product-name .wc-item-meta li strong,
body.wcppcm-checkout-styled #order_review .product-name .wc-item-meta li p,
body.wcppcm-checkout-styled #order_review .product-name small,
body.wcppcm-checkout-styled #order_review .product-name .wcppcm_recap_summary {
  font-size: 11px !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
body.wcppcm-checkout-styled #order_review .product-name a {
  font-size: 11px !important;
  font-weight: 600;
}

/* --- Alignement label / valeur des item meta (ex "Livraison estimée : entre …") ---
   Par défaut WC met le <dt> en float + le <dd> avec une marge → décalage vertical.
   On force tout en inline sur la même baseline, 1 meta par ligne. */
body.wcppcm-checkout-styled #order_review .product-name dl.variation,
body.wcppcm-checkout-styled #order_review .product-name dl {
  margin: 6px 0 0 !important;
  overflow: visible !important;
}
body.wcppcm-checkout-styled #order_review .product-name dl dt,
body.wcppcm-checkout-styled #order_review .product-name dl dd {
  display: inline !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: baseline !important;
}
body.wcppcm-checkout-styled #order_review .product-name dl dt {
  margin-right: 4px !important;
}
/* Retour à la ligne après chaque valeur → une meta par ligne */
body.wcppcm-checkout-styled #order_review .product-name dl dd::after {
  content: "" !important;
  display: block !important;
  height: 0 !important;
}
body.wcppcm-checkout-styled #order_review .product-name dl dd p {
  display: inline !important;
  margin: 0 !important;
}
/* Format alternatif wc-item-meta (ul/li) : label + valeur alignés */
body.wcppcm-checkout-styled #order_review .product-name ul.wc-item-meta {
  list-style: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
body.wcppcm-checkout-styled #order_review .product-name ul.wc-item-meta li {
  margin: 0 0 2px !important;
  padding: 0 !important;
}
body.wcppcm-checkout-styled #order_review .product-name ul.wc-item-meta li p {
  display: inline !important;
  margin: 0 !important;
}

/* --- Produits en BLOCS espacés et légèrement arrondis --- */
body.wcppcm-checkout-styled #order_review table.shop_table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
}
body.wcppcm-checkout-styled #order_review tbody tr.cart_item td {
  background: #ffffff !important;
  border-top: 1px solid #eef2f7 !important;
  border-bottom: 1px solid #eef2f7 !important;
  padding: 16px 16px !important;
  vertical-align: top !important;
}
body.wcppcm-checkout-styled #order_review tbody tr.cart_item td:first-child {
  border-left: 1px solid #eef2f7 !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}
body.wcppcm-checkout-styled #order_review tbody tr.cart_item td:last-child {
  border-right: 1px solid #eef2f7 !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Cellules totaux (sous-total, expédition, TVA) — wrap propre */
body.wcppcm-checkout-styled #order_review .cart-subtotal td,
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td,
body.wcppcm-checkout-styled #order_review .tax-rate td,
body.wcppcm-checkout-styled #order_review .fee td {
  white-space: normal !important;
  word-wrap: break-word;
  text-align: right !important;
}
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td .shipping-calculator-button,
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals .shipping-calculator-button {
  font-size: 11px !important;
}

/* --- Ligne EXPÉDITION : nom du transporteur stack au-dessus du montant ---
   "Forfait livraison France métropolitaine : 39,00 €" wrappait sur 4 lignes
   dans la colonne sticky 380px. On stacke proprement en colonne. */
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.4 !important;
}
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  text-align: right;
}
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td ul li {
  margin: 0 0 4px;
  padding: 0;
  list-style: none !important;
}
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td ul li label,
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td > label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-align: right;
  margin: 0 0 2px !important;
  line-height: 1.35 !important;
}
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td .amount,
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td bdi {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
/* Méthode de port unique (sans <ul>) : on stack quand même proprement */
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals .woocommerce-shipping-methods + .amount,
body.wcppcm-checkout-styled #order_review .woocommerce-shipping-totals td > strong {
  display: block;
  text-align: right;
  margin-top: 2px;
}
/* Miniature produit + bouton "Voir la maquette" — compact */
body.wcppcm-checkout-styled #order_review .product-name img,
body.wcppcm-checkout-styled #order_review .product-name .attachment-thumbnail {
  max-width: 50px !important;
  height: auto !important;
  border-radius: 6px;
}

/* --- Paiement --- */
body.wcppcm-checkout-styled #payment {
  background: #fff !important;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 22px 24px !important;
  margin-top: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-checkout-styled #payment ul.payment_methods {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
body.wcppcm-checkout-styled #payment ul.payment_methods li {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.15s, background 0.15s;
}
body.wcppcm-checkout-styled #payment ul.payment_methods li:hover {
  border-color: #cbd5e1;
  background: #fff;
}
body.wcppcm-checkout-styled #payment ul.payment_methods li input[type="radio"]:checked + label,
body.wcppcm-checkout-styled #payment ul.payment_methods li.wc_payment_method.selected,
body.wcppcm-checkout-styled #payment ul.payment_methods li:has(input:checked) {
  border-color: #0a9bcd !important;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%) !important;
}
body.wcppcm-checkout-styled #payment ul.payment_methods li label {
  display: inline-block;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer;
}
body.wcppcm-checkout-styled #payment .payment_box {
  background: rgba(241, 245, 249, 0.6) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #475569 !important;
  margin-top: 10px !important;
  padding: 12px 14px !important;
}
body.wcppcm-checkout-styled #payment .payment_box::before {
  display: none !important;
}

/* --- Bouton "Commander" --- */
body.wcppcm-checkout-styled #place_order {
  display: block;
  width: 100%;
  margin-top: 18px !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(10, 155, 205, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body.wcppcm-checkout-styled #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(10, 155, 205, 0.5);
  background: linear-gradient(135deg, #0771a6 0%, #0a9bcd 100%) !important;
}
body.wcppcm-checkout-styled #place_order:disabled,
body.wcppcm-checkout-styled #place_order.disabled {
  background: #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* --- Privacy + Terms --- */
body.wcppcm-checkout-styled .woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: #475569 !important;
  margin: 18px 0 12px;
  line-height: 1.5;
}
body.wcppcm-checkout-styled .woocommerce-terms-and-conditions-wrapper {
  margin: 12px 0 18px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
}
body.wcppcm-checkout-styled .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}
body.wcppcm-checkout-styled #terms {
  accent-color: #0a9bcd;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}

/* --- Bloc B2B affiché page commande + email --- */
.wcppcm-customer-b2b address {
  background: #f8fafc;
  border-left: 3px solid #0a9bcd;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}
.wcppcm-customer-b2b strong {
  color: #1e293b;
}

/* ==========================================================================
   CHECKOUT — INDICATEUR D'ÉTAPES
   ========================================================================== */
body.wcppcm-checkout-styled .wcppcm-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}
body.wcppcm-checkout-styled .wcppcm-checkout-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-decoration: none !important;
  color: #94a3b8;
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
body.wcppcm-checkout-styled .wcppcm-checkout-step:hover {
  color: #0a9bcd;
  background: #f0f9ff;
}
body.wcppcm-checkout-styled .wcppcm-checkout-step.is-active {
  color: #0a9bcd;
}
body.wcppcm-checkout-styled .wcppcm-checkout-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(10, 155, 205, 0.25);
}
body.wcppcm-checkout-styled .wcppcm-checkout-step__label {
  white-space: nowrap;
}
body.wcppcm-checkout-styled .wcppcm-checkout-step__separator {
  flex: 1 1 auto;
  height: 2px;
  max-width: 40px;
  background: linear-gradient(to right, #cbd5e1, #e2e8f0);
  border-radius: 1px;
}

/* ==========================================================================
   CHECKOUT — LAYOUT BLOC UNIQUE
   Adresses de facturation/livraison en 2 colonnes (WC natif),
   puis "Votre commande" pleine largeur DESSOUS (plus pratique que 3 blocs).
   ========================================================================== */
@media (min-width: 1024px) {
  body.wcppcm-checkout-styled form.checkout {
    display: block;
  }
  /* Le wrapper "Votre commande" passe en bloc plein largeur sous les adresses */
  body.wcppcm-checkout-styled form.checkout > .wcppcm-review-wrapper {
    margin-top: 32px;
    position: static;
    max-height: none;
    overflow: visible;
    width: 100%;
  }
  /* Soude visuellement heading + review (panneau unique) */
  body.wcppcm-checkout-styled .wcppcm-review-wrapper > #order_review_heading {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  body.wcppcm-checkout-styled .wcppcm-review-wrapper > #order_review {
    margin-top: 0;
    border-top: 1px solid #eef2f7;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* --- Mobile : ajustements --- */
@media (max-width: 768px) {
  body.wcppcm-checkout-styled .woocommerce-billing-fields,
  body.wcppcm-checkout-styled .woocommerce-shipping-fields,
  body.wcppcm-checkout-styled #order_review_heading,
  body.wcppcm-checkout-styled #order_review,
  body.wcppcm-checkout-styled #payment {
    padding: 18px 16px !important;
    border-radius: 12px;
  }
  body.wcppcm-checkout-styled .woocommerce-billing-fields > h3,
  body.wcppcm-checkout-styled .woocommerce-shipping-fields > h3,
  body.wcppcm-checkout-styled #order_review_heading {
    font-size: 16px !important;
  }
  body.wcppcm-checkout-styled .wcppcm-customer-type-wrap span.woocommerce-input-wrapper,
  body.wcppcm-checkout-styled .wcppcm-customer-type-wrap > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.wcppcm-checkout-styled .woocommerce form .form-row input.input-text {
    font-size: 16px !important; /* évite zoom iOS */
  }
  body.wcppcm-checkout-styled #place_order {
    padding: 16px 20px !important;
    font-size: 15px !important;
  }
  /* Step indicator compact mobile */
  body.wcppcm-checkout-styled .wcppcm-checkout-steps {
    padding: 14px 16px;
    gap: 4px;
    border-radius: 16px;
  }
  body.wcppcm-checkout-styled .wcppcm-checkout-step {
    padding: 4px 6px;
    font-size: 12px;
    gap: 6px;
  }
  body.wcppcm-checkout-styled .wcppcm-checkout-step__num {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  body.wcppcm-checkout-styled .wcppcm-checkout-step__separator {
    max-width: 20px;
  }
  body.wcppcm-checkout-styled .wcppcm-checkout-step__label {
    display: none; /* en mobile, on garde juste les pastilles numérotées */
  }
}

/* ==========================================================================
   PAGE ORDER-RECEIVED (Merci pour votre commande)
   ========================================================================== */
body.wcppcm-thankyou-styled .woocommerce-order {
  max-width: 920px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}
body.wcppcm-thankyou-styled .woocommerce-notice--success,
body.wcppcm-thankyou-styled .woocommerce-thankyou-order-received {
  display: none; /* on remplace par notre hero */
}

/* Hero "Merci" */
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero {
  text-align: center;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 16px;
  padding: 40px 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px -4px rgba(10, 155, 205, 0.15);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px -4px rgba(34, 197, 94, 0.4);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__title {
  font-size: 28px;
  font-weight: 800;
  color: #0c4a6e;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__sub {
  font-size: 15px;
  color: #475569;
  margin: 0 0 14px;
  line-height: 1.5;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__sub strong {
  color: #0c4a6e;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__b2b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(10, 155, 205, 0.2);
  border-radius: 999px;
  font-size: 13px;
  color: #0c4a6e;
  font-weight: 500;
}

/* Bloc "Et maintenant ?" */
body.wcppcm-thankyou-styled .wcppcm-thankyou-steps {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 30px 30px 24px;
  margin-bottom: 30px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-steps__title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
  text-align: center;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step {
  position: relative;
  padding: 22px 18px 16px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step__num {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a9bcd;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  color: #0a9bcd;
  border-radius: 12px;
  margin-bottom: 10px;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-step p {
  font-size: 12px;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

/* Bouton contact */
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact {
  text-align: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #f1f5f9;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #475569;
  font-weight: 500;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact__btn {
  display: inline-block;
  margin: 4px 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 8px -2px rgba(10, 155, 205, 0.3);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -2px rgba(10, 155, 205, 0.4);
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact__btn--secondary {
  background: #fff;
  color: #0a9bcd !important;
  border: 1.5px solid #0a9bcd;
  box-shadow: none;
}
body.wcppcm-thankyou-styled .wcppcm-thankyou-contact__btn--secondary:hover {
  background: #f0f9ff;
  box-shadow: 0 3px 8px -2px rgba(10, 155, 205, 0.15);
}

/* Détails de commande WC (sections natives stylées) */
body.wcppcm-thankyou-styled .woocommerce-order-overview,
body.wcppcm-thankyou-styled .woocommerce-order-details,
body.wcppcm-thankyou-styled .woocommerce-customer-details {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-thankyou-styled .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin-left: 0 !important;
  padding-left: 26px !important;
}
body.wcppcm-thankyou-styled .woocommerce-order-overview li {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 4px 18px;
  border-left: 2px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
body.wcppcm-thankyou-styled .woocommerce-order-overview li:first-child {
  border-left: none;
  padding-left: 0;
}
body.wcppcm-thankyou-styled .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  text-transform: none;
  letter-spacing: 0;
}
body.wcppcm-thankyou-styled .woocommerce-order-details h2,
body.wcppcm-thankyou-styled .woocommerce-customer-details h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
body.wcppcm-thankyou-styled .woocommerce-customer-details address {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-left: 3px solid #0a9bcd;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #475569;
  font-style: normal;
}

/* ==========================================================================
   FORMULAIRE DE CONTACT — pro, B2B-aware, upload, multi-section
   ========================================================================== */
.wcppcm-contact {
  max-width: 880px;
  margin: 0 auto;
  padding: 30px 16px 60px;
}
.wcppcm-contact__intro {
  text-align: center;
  margin-bottom: 36px;
}
.wcppcm-contact__title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.wcppcm-contact__subtitle {
  font-size: 15px;
  color: #475569;
  margin: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* --- Sections --- */
.wcppcm-contact-section {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
.wcppcm-contact-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.wcppcm-contact-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -1px rgba(10, 155, 205, 0.4);
}
.wcppcm-contact-section__head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* --- Fields & layout --- */
.wcppcm-contact .wcppcm-field {
  margin-bottom: 14px;
}
.wcppcm-contact .wcppcm-field:last-child {
  margin-bottom: 0;
}
.wcppcm-contact .wcppcm-field label,
.wcppcm-contact .wcppcm-customer-type-label,
.wcppcm-contact > * label:not(.wcppcm-customer-type-option):not(.wcppcm-request-type):not(.wcppcm-gdpr) {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
}
.wcppcm-contact .wcppcm-field .req {
  color: #ef4444;
}
.wcppcm-contact .wcppcm-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wcppcm-contact input[type="text"],
.wcppcm-contact input[type="email"],
.wcppcm-contact input[type="tel"],
.wcppcm-contact input[type="number"],
.wcppcm-contact input[type="date"],
.wcppcm-contact select,
.wcppcm-contact textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.wcppcm-contact input:focus,
.wcppcm-contact select:focus,
.wcppcm-contact textarea:focus {
  outline: none;
  border-color: #0a9bcd;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.15);
}
.wcppcm-contact textarea {
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}
.wcppcm-contact select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.wcppcm-contact input.wcppcm-input-valid {
  border-color: #16a34a;
  background-color: #f0fdf4;
}
.wcppcm-contact input.wcppcm-input-invalid {
  border-color: #ef4444;
  background-color: #fef2f2;
}
.wcppcm-contact .wcppcm-field-feedback {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.wcppcm-contact .wcppcm-field-feedback--valid { color: #15803d; }
.wcppcm-contact .wcppcm-field-feedback--invalid { color: #b91c1c; }

/* --- Toggle Particulier / Entreprise --- */
.wcppcm-contact .wcppcm-customer-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
}
.wcppcm-contact .wcppcm-customer-type-option {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease;
  margin: 0;
  min-height: 60px;
  user-select: none;
  position: relative;
  letter-spacing: normal;
}
.wcppcm-contact .wcppcm-customer-type-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}
.wcppcm-contact .wcppcm-customer-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.wcppcm-contact .wcppcm-customer-type-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  transition: color 0.18s;
}
.wcppcm-contact .wcppcm-customer-type-option.is-active {
  border-color: #0a9bcd;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  color: #0c4a6e;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.12);
}
.wcppcm-contact .wcppcm-customer-type-option.is-active .wcppcm-customer-type-option__icon {
  color: #0a9bcd;
}
.wcppcm-contact .wcppcm-contact-b2b {
  margin-top: 4px;
}

/* --- Type de demande (radio cards horizontal) --- */
.wcppcm-contact .wcppcm-request-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wcppcm-contact .wcppcm-request-type {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.wcppcm-contact .wcppcm-request-type input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.wcppcm-contact .wcppcm-request-type:hover {
  border-color: #0a9bcd;
  color: #0a9bcd;
}
.wcppcm-contact .wcppcm-request-type.is-active {
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  border-color: #0771a6;
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(10, 155, 205, 0.3);
}

/* --- Upload zone --- */
.wcppcm-contact .wcppcm-upload-zone {
  position: relative;
  padding: 30px 20px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.wcppcm-contact .wcppcm-upload-zone:hover,
.wcppcm-contact .wcppcm-upload-zone:focus,
.wcppcm-contact .wcppcm-upload-zone.is-hover {
  border-color: #0a9bcd;
  background: #e0f2fe;
}
.wcppcm-contact .wcppcm-upload-input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.wcppcm-contact .wcppcm-upload-zone__inner {
  pointer-events: none;
}
.wcppcm-contact .wcppcm-upload-zone svg {
  color: #94a3b8;
  margin-bottom: 8px;
}
.wcppcm-contact .wcppcm-upload-zone__primary {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.wcppcm-contact .wcppcm-upload-zone__sub {
  font-size: 12px;
  color: #475569;
}
.wcppcm-contact .wcppcm-upload-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wcppcm-contact .wcppcm-upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.wcppcm-contact .wcppcm-upload-item__ext {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #0a9bcd, #0771a6);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wcppcm-contact .wcppcm-upload-item__info {
  flex: 1 1 auto;
  min-width: 0;
}
.wcppcm-contact .wcppcm-upload-item__name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wcppcm-contact .wcppcm-upload-item__size {
  font-size: 11px;
  color: #94a3b8;
}
.wcppcm-contact .wcppcm-upload-item__remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #475569;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s;
}
.wcppcm-contact .wcppcm-upload-item__remove:hover {
  background: #ef4444;
  color: #fff;
}

/* --- RGPD + Submit --- */
.wcppcm-contact .wcppcm-contact-footer {
  margin-top: 6px;
}
.wcppcm-contact .wcppcm-gdpr {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  cursor: pointer;
  font-weight: 400;
}
.wcppcm-contact .wcppcm-gdpr input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #0a9bcd;
  cursor: pointer;
}
.wcppcm-contact .wcppcm-gdpr a {
  color: #0a9bcd;
  font-weight: 600;
  text-decoration: none;
}
.wcppcm-contact .wcppcm-gdpr a:hover {
  text-decoration: underline;
}

.wcppcm-contact .wcppcm-contact-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(10, 155, 205, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.wcppcm-contact .wcppcm-contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(10, 155, 205, 0.5);
}
.wcppcm-contact .wcppcm-contact-submit:disabled,
.wcppcm-contact .wcppcm-contact-submit.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.wcppcm-contact .wcppcm-contact-submit__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wcppcm-spin 0.8s linear infinite;
}
.wcppcm-contact .wcppcm-contact-submit.is-loading .wcppcm-contact-submit__spinner {
  display: inline-block;
}
@keyframes wcppcm-spin {
  to { transform: rotate(360deg); }
}

/* --- Feedback (erreurs serveur) --- */
.wcppcm-contact .wcppcm-contact-feedback {
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.wcppcm-contact .wcppcm-contact-feedback.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.wcppcm-contact .wcppcm-contact-feedback.is-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.wcppcm-contact .wcppcm-contact-feedback.is-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* --- Success state --- */
.wcppcm-contact-success {
  text-align: center;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 50px 30px;
  box-shadow: 0 4px 20px -4px rgba(34, 197, 94, 0.2);
}
.wcppcm-contact-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px -6px rgba(34, 197, 94, 0.45);
  animation: wcppcm-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wcppcm-bounce {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
.wcppcm-contact-success h2 {
  font-size: 26px;
  font-weight: 800;
  color: #14532d;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.wcppcm-contact-success p {
  font-size: 15px;
  color: #166534;
  margin: 0;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .wcppcm-contact {
    padding: 24px 14px 50px;
  }
  .wcppcm-contact__title {
    font-size: 26px;
  }
  .wcppcm-contact-section {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .wcppcm-contact .wcppcm-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wcppcm-contact .wcppcm-customer-type-options {
    grid-template-columns: 1fr;
  }
  .wcppcm-contact input,
  .wcppcm-contact select,
  .wcppcm-contact textarea {
    font-size: 16px; /* anti-zoom iOS */
  }
}

@media (max-width: 768px) {
  body.wcppcm-thankyou-styled .wcppcm-thankyou-hero {
    padding: 26px 18px;
  }
  body.wcppcm-thankyou-styled .wcppcm-thankyou-hero__title {
    font-size: 22px;
  }
  body.wcppcm-thankyou-styled .wcppcm-thankyou-steps {
    padding: 22px 18px 18px;
  }
  body.wcppcm-thankyou-styled .wcppcm-thankyou-steps__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body.wcppcm-thankyou-styled .woocommerce-order-overview {
    padding-left: 18px !important;
  }
  body.wcppcm-thankyou-styled .woocommerce-order-overview li {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding: 12px 0 10px;
  }
  body.wcppcm-thankyou-styled .woocommerce-order-overview li:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ==========================================================================
   MON COMPTE — refonte design (Dashboard + Orders + Addresses + Account)
   Scope : body.wcppcm-account-styled
   ========================================================================== */

body.wcppcm-account-styled .woocommerce-account .woocommerce {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 16px 80px;
}

/* Padding bas sur tous les containers possibles — Divi peut wrapper le content
   dans des modules qui n'héritent pas du padding ci-dessus. On force des marges
   bottom généreuses sur tout ce qui peut être la dernière section visible. */
body.wcppcm-account-styled .woocommerce-MyAccount-content,
body.wcppcm-account-styled .wcppcm-account-content-fallback,
body.wcppcm-account-styled .et_pb_wc_account_settings,
body.wcppcm-account-styled .et_pb_wc_account_orders,
body.wcppcm-account-styled .et_pb_wc_account_addresses,
body.wcppcm-account-styled .et_pb_wc_account_downloads,
body.wcppcm-account-styled .et_pb_wc_account_payment_methods,
body.wcppcm-account-styled [class*="et_pb_wc_account"] {
  padding-bottom: 60px !important;
}

/* Et marge bas sur le dernier élément de chaque sous-page */
body.wcppcm-account-styled .woocommerce-Addresses,
body.wcppcm-account-styled .u-columns,
body.wcppcm-account-styled .woocommerce-orders-table,
body.wcppcm-account-styled .woocommerce-order-details,
body.wcppcm-account-styled form.woocommerce-EditAccountForm,
body.wcppcm-account-styled form.woocommerce-address-fields,
body.wcppcm-account-styled form.lost_reset_password,
body.wcppcm-account-styled .wcppcm-account-hero {
  margin-bottom: 40px !important;
}

/* --- Nav en barre HORIZONTALE en haut (au lieu de sidebar)
   Approche plus robuste : marche dans tous les contextes (Divi modules,
   shortcode, container étroit ou large). La nav devient une barre de tabs
   pill au-dessus du contenu. */

/* Le template caché ne doit JAMAIS apparaître visuellement */
#wcppcm-account-nav-template {
  display: none !important;
}

/* Fallback ultime : si aucun parent valide n'a été trouvé, le JS attache
   la nav au <body> avec cette classe. On la positionne en floating panel
   à gauche (style "sticky sidebar"). */
@media (min-width: 980px) {
  body.wcppcm-account-styled .wcppcm-account-nav-floating {
    position: fixed;
    top: 120px;
    left: max(20px, calc((100vw - 1180px) / 2));
    width: 240px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    z-index: 50;
  }
}
@media (max-width: 979px) {
  body.wcppcm-account-styled .wcppcm-account-nav-floating {
    position: relative;
    margin: 0 auto 20px;
    max-width: 1180px;
  }
}

/* Si la nav est injectée au top d'un section générique (Divi), on lui
   donne une marge propre et on ne dégrade pas le layout. */
body.wcppcm-account-styled .wcppcm-account-nav-fixed {
  margin: 0 auto 24px;
  max-width: 1180px;
}

/* Container du contenu : full-width responsive si pas de sidebar */
body.wcppcm-account-styled .woocommerce-MyAccount-content {
  width: 100%;
  max-width: 100%;
}

/* --- Navigation : barre de tabs HORIZONTALE en haut du contenu ---
   `!important` partout pour forcer rendu (Divi injecte display:none sur la
   nav native et écrase nos styles génériques ailleurs). */
body.wcppcm-account-styled .woocommerce-MyAccount-navigation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 14px !important;
  padding: 10px !important;
  margin: 0 0 24px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
  position: static !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-wrap: wrap;
  visibility: visible !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  gap: 4px;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li {
  display: inline-flex !important;
  visibility: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  width: auto !important;
  flex: 0 0 auto;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 9px;
  transition: all 0.15s;
  line-height: 1.2;
  white-space: nowrap;
  border-left: none !important;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.15s;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li a:hover {
  color: #0a9bcd !important;
  background: #f0f9ff !important;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li a:hover::before {
  opacity: 1;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.is-active a {
  color: #fff !important;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px -1px rgba(10, 155, 205, 0.4);
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.is-active a::before {
  opacity: 1;
  filter: brightness(0) invert(1); /* icône en blanc sur fond teal */
}
/* Item logout : séparateur visuel à gauche (border) */
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-left: auto !important;
  padding-left: 8px !important;
  border-left: 1px solid #f1f5f9 !important;
}
/* Item service client : couleur teal native */
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--contact-sav a {
  color: #0a9bcd !important;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--contact-sav a:hover {
  background: #e0f2fe !important;
}

/* Icônes par slug d'item (utilise les classes natives WC) */
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--payment-methods a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--contact-sav a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a9bcd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  opacity: 1;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--contact-sav a {
  color: #0a9bcd !important;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--contact-sav a:hover {
  background: #e0f2fe;
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9;
}

/* --- Content area --- */
body.wcppcm-account-styled .woocommerce-MyAccount-content {
  min-width: 0;
}

/* --- HERO Dashboard --- */
body.wcppcm-account-styled .wcppcm-account-hero {
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  border-radius: 16px;
  padding: 30px 32px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px -8px rgba(10, 155, 205, 0.4);
  position: relative;
  overflow: hidden;
}
body.wcppcm-account-styled .wcppcm-account-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
body.wcppcm-account-styled .wcppcm-account-hero__main {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
}
body.wcppcm-account-styled .wcppcm-account-hero__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  display: block;
}
body.wcppcm-account-styled .wcppcm-account-hero__text {
  flex: 1;
}
body.wcppcm-account-styled .wcppcm-account-hero__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
body.wcppcm-account-styled .wcppcm-account-hero__sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
body.wcppcm-account-styled .wcppcm-account-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* --- Cards Quick Actions --- */
body.wcppcm-account-styled .wcppcm-account-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  position: relative;
}
body.wcppcm-account-styled .wcppcm-account-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.18s ease;
  backdrop-filter: blur(8px);
  position: relative;
  min-height: 80px;
}
body.wcppcm-account-styled .wcppcm-account-action:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
}
body.wcppcm-account-styled .wcppcm-account-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #fff;
}
body.wcppcm-account-styled .wcppcm-account-action__label {
  line-height: 1.2;
}
body.wcppcm-account-styled .wcppcm-account-action__count {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
}
body.wcppcm-account-styled .wcppcm-account-action--accent {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}
body.wcppcm-account-styled .wcppcm-account-action--accent .wcppcm-account-action__icon {
  background: rgba(245, 158, 11, 0.35);
}
body.wcppcm-account-styled .wcppcm-account-action--ghost {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

/* --- Titres h2/h3 du content --- */
body.wcppcm-account-styled .woocommerce-MyAccount-content > h2,
body.wcppcm-account-styled .woocommerce-MyAccount-content > h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

/* --- Tableau "Mes commandes" --- */
body.wcppcm-account-styled .woocommerce-orders-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-account-styled .woocommerce-orders-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: left;
}
body.wcppcm-account-styled .woocommerce-orders-table tbody td {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: #0f172a !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  vertical-align: middle;
}
body.wcppcm-account-styled .woocommerce-orders-table tbody tr:last-child td {
  border-bottom: none !important;
}
body.wcppcm-account-styled .woocommerce-orders-table tbody tr:hover td {
  background: #f8fafc !important;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-number a {
  color: #0a9bcd !important;
  font-weight: 700;
  text-decoration: none !important;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline !important;
}

/* Pastilles de statut commande */
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-status {
  font-weight: 700;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0f2fe;
  color: #0c4a6e;
  border: 1px solid #bae6fd;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-pending,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-pending {
  background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-on-hold,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-on-hold {
  background: #e0f2fe !important; color: #0c4a6e !important; border-color: #bae6fd !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-processing,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-processing {
  background: #fed7aa !important; color: #9a3412 !important; border-color: #fdba74 !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-completed,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-completed {
  background: #bbf7d0 !important; color: #14532d !important; border-color: #86efac !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-cancelled,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-cancelled {
  background: #fecaca !important; color: #7f1d1d !important; border-color: #fca5a5 !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-refunded,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-refunded {
  background: #e9d5ff !important; color: #581c87 !important; border-color: #d8b4fe !important;
}
body.wcppcm-account-styled .woocommerce-orders-table mark.order-status.status-failed,
body.wcppcm-account-styled .woocommerce-orders-table mark.status-failed {
  background: #fecaca !important; color: #7f1d1d !important; border-color: #fca5a5 !important;
}

/* Boutons d'action dans le tableau */
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions .button,
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions a.button {
  display: inline-block;
  padding: 7px 14px !important;
  background: #fff !important;
  color: #0a9bcd !important;
  border: 1.5px solid #0a9bcd !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin: 2px 4px 2px 0;
  transition: all 0.15s;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions .button:hover {
  background: #0a9bcd !important;
  color: #fff !important;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions .button.pay {
  background: linear-gradient(135deg, #0a9bcd, #0771a6) !important;
  color: #fff !important;
  border-color: #0771a6 !important;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions .button.cancel {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
body.wcppcm-account-styled .woocommerce-orders-table__cell-order-actions .button.cancel:hover {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}

/* --- Pagination commandes --- */
body.wcppcm-account-styled .woocommerce-pagination {
  margin-top: 20px;
  text-align: center;
}
body.wcppcm-account-styled .woocommerce-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 2px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-weight: 600;
  text-decoration: none !important;
  font-size: 13px;
}
body.wcppcm-account-styled .woocommerce-pagination .page-numbers.current {
  background: linear-gradient(135deg, #0a9bcd, #0771a6);
  color: #fff;
  border-color: #0771a6;
}
body.wcppcm-account-styled .woocommerce-pagination .page-numbers:hover {
  border-color: #0a9bcd;
  color: #0a9bcd;
}

/* --- Adresses (2 cards) ---
   Grid auto-fit avec min 280px → 2 cards côte à côte si la place le permet,
   stack si trop étroit. Marche dans tous les containers (Divi inclus). */
body.wcppcm-account-styled .woocommerce-Addresses,
body.wcppcm-account-styled .u-columns,
body.wcppcm-account-styled .woocommerce-MyAccount-content > .addresses,
body.wcppcm-account-styled .addresses.u-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.wcppcm-account-styled .woocommerce-Address,
body.wcppcm-account-styled .u-column1,
body.wcppcm-account-styled .u-column2 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}
body.wcppcm-account-styled .woocommerce-Address {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 22px 24px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-account-styled .woocommerce-Address-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
body.wcppcm-account-styled .woocommerce-Address-title h2,
body.wcppcm-account-styled .woocommerce-Address-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: normal;
  word-wrap: break-word;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
/* Bouton "Modifier" : on raccourcit le texte natif WC long
   ("Modifier Adresse de facturation") via une astuce CSS — on cache
   le texte original avec font-size:0 et on affiche juste "Modifier" via
   ::before. Le aria-label / accessibilité reste préservé. */
body.wcppcm-account-styled .woocommerce-Address-title .edit {
  display: inline-flex !important;
  align-items: center;
  padding: 6px 14px !important;
  background: #fff !important;
  color: #0a9bcd !important;
  border: 1.5px solid #0a9bcd !important;
  border-radius: 8px !important;
  font-size: 0 !important;     /* cache le label original */
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1.2;
}
body.wcppcm-account-styled .woocommerce-Address-title .edit::before {
  content: "✎ Modifier";
  font-size: 12px;
  letter-spacing: 0.02em;
}
body.wcppcm-account-styled .woocommerce-Address-title .edit:hover {
  background: #0a9bcd !important;
  color: #fff !important;
}
body.wcppcm-account-styled .woocommerce-Address address {
  font-style: normal;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

/* --- Form Détails du compte + Adresses (édition) --- */
body.wcppcm-account-styled form.woocommerce-EditAccountForm,
body.wcppcm-account-styled form.woocommerce-address-fields,
body.wcppcm-account-styled form.lost_reset_password {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm .form-row,
body.wcppcm-account-styled form.woocommerce-address-fields .form-row,
body.wcppcm-account-styled form.lost_reset_password .form-row {
  margin-bottom: 16px;
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm label,
body.wcppcm-account-styled form.woocommerce-address-fields label,
body.wcppcm-account-styled form.lost_reset_password label {
  display: block;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm input,
body.wcppcm-account-styled form.woocommerce-EditAccountForm select,
body.wcppcm-account-styled form.woocommerce-address-fields input,
body.wcppcm-account-styled form.woocommerce-address-fields select,
body.wcppcm-account-styled form.lost_reset_password input {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm input:focus,
body.wcppcm-account-styled form.woocommerce-address-fields input:focus,
body.wcppcm-account-styled form.lost_reset_password input:focus {
  outline: none !important;
  border-color: #0a9bcd !important;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.15) !important;
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm fieldset {
  margin-top: 24px;
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}
body.wcppcm-account-styled form.woocommerce-EditAccountForm fieldset legend {
  font-size: 14px;
  font-weight: 700;
  color: #0a9bcd;
  padding: 0 8px;
}

/* Boutons submit forms */
body.wcppcm-account-styled .woocommerce-MyAccount-content button[type="submit"],
body.wcppcm-account-styled .woocommerce-MyAccount-content input[type="submit"],
body.wcppcm-account-styled .woocommerce-MyAccount-content button.button {
  display: inline-block;
  padding: 13px 24px !important;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 4px 12px -2px rgba(10, 155, 205, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none !important;
}
body.wcppcm-account-styled .woocommerce-MyAccount-content button[type="submit"]:hover,
body.wcppcm-account-styled .woocommerce-MyAccount-content input[type="submit"]:hover,
body.wcppcm-account-styled .woocommerce-MyAccount-content button.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(10, 155, 205, 0.5);
}

/* --- Connexion / Inscription (visiteur non logué) ---
   Hero centré + 2 cards login/register côte à côte avec icônes et boutons teal */

/* Hero intro */
body.wcppcm-account-styled .wcppcm-login-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
body.wcppcm-account-styled .wcppcm-login-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px -4px rgba(10, 155, 205, 0.4);
}
body.wcppcm-account-styled h1.wcppcm-login-hero__title,
body.wcppcm-account-styled .wcppcm-login-hero__title {
  margin: 0 0 8px !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
body.wcppcm-account-styled .wcppcm-login-hero__sub {
  margin: 0 !important;
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

/* Container des 2 forms côte à côte (WC les wrap dans .u-columns sur certaines pages) */
body.wcppcm-account-styled .woocommerce-account .u-columns:has(.woocommerce-form-login),
body.wcppcm-account-styled .u-columns.col2-set:has(.woocommerce-form-login) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px !important;
  max-width: 880px;
  margin: 0 auto !important;
}

/* Card login + register */
body.wcppcm-account-styled .woocommerce-form-login,
body.wcppcm-account-styled .woocommerce-form-register {
  max-width: 100%;
  margin: 0 auto !important;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 32px 30px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.wcppcm-account-styled .woocommerce-form-login:hover,
body.wcppcm-account-styled .woocommerce-form-register:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 32px -12px rgba(15, 23, 42, 0.12);
}

/* Icône en haut de chaque card (pseudo-élément SVG) */
body.wcppcm-account-styled .woocommerce-form-login::before,
body.wcppcm-account-styled .woocommerce-form-register::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto 14px;
}
body.wcppcm-account-styled .woocommerce-form-login::before {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230a9bcd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/26px 26px no-repeat,
    linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}
body.wcppcm-account-styled .woocommerce-form-register::before {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E") center/26px 26px no-repeat,
    linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

/* Heading "Se connecter" / "S'inscrire" du form */
body.wcppcm-account-styled .woocommerce-form-login h2,
body.wcppcm-account-styled .woocommerce-form-register h2,
body.wcppcm-account-styled h2.woocommerce-LoginHeading,
body.wcppcm-account-styled h2.woocommerce-RegisterHeading {
  text-align: center !important;
  margin: 0 0 6px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
/* Sous-titre optionnel (si on en ajoute via PHP plus tard) */
body.wcppcm-account-styled .woocommerce-form-login .wcppcm-form-sub,
body.wcppcm-account-styled .woocommerce-form-register .wcppcm-form-sub {
  text-align: center;
  margin: 0 0 22px !important;
  font-size: 13px;
  color: #475569;
}

/* Champs des formulaires */
body.wcppcm-account-styled .woocommerce-form-login .form-row,
body.wcppcm-account-styled .woocommerce-form-register .form-row {
  margin-bottom: 16px !important;
}
body.wcppcm-account-styled .woocommerce-form-login label,
body.wcppcm-account-styled .woocommerce-form-register label {
  display: block;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: 0.02em;
}
body.wcppcm-account-styled .woocommerce-form-login input.input-text,
body.wcppcm-account-styled .woocommerce-form-register input.input-text,
body.wcppcm-account-styled .woocommerce-form-login input[type="password"],
body.wcppcm-account-styled .woocommerce-form-register input[type="password"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.wcppcm-account-styled .woocommerce-form-login input.input-text:focus,
body.wcppcm-account-styled .woocommerce-form-register input.input-text:focus,
body.wcppcm-account-styled .woocommerce-form-login input[type="password"]:focus,
body.wcppcm-account-styled .woocommerce-form-register input[type="password"]:focus {
  outline: none !important;
  border-color: #0a9bcd !important;
  box-shadow: 0 0 0 3px rgba(10, 155, 205, 0.15) !important;
}

/* Boutons "Se connecter" + "S'inscrire" — teal gradient au lieu du vert WC */
body.wcppcm-account-styled .woocommerce-form-login button[type="submit"],
body.wcppcm-account-styled .woocommerce-form-register button[type="submit"],
body.wcppcm-account-styled .woocommerce-form-login button.woocommerce-button,
body.wcppcm-account-styled .woocommerce-form-register button.woocommerce-button,
body.wcppcm-account-styled .woocommerce-form-login button.button,
body.wcppcm-account-styled .woocommerce-form-register button.button {
  display: block !important;
  width: 100% !important;
  padding: 13px 24px !important;
  background: linear-gradient(135deg, #0a9bcd 0%, #0771a6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  text-transform: none !important;
  box-shadow: 0 4px 12px -2px rgba(10, 155, 205, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  margin-top: 8px !important;
}
body.wcppcm-account-styled .woocommerce-form-login button[type="submit"]:hover,
body.wcppcm-account-styled .woocommerce-form-register button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(10, 155, 205, 0.5);
  filter: brightness(1.05);
}

/* "Se souvenir de moi" */
body.wcppcm-account-styled .woocommerce-form-login__rememberme,
body.wcppcm-account-styled .woocommerce-form-login p.form-row label.woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  cursor: pointer;
}
body.wcppcm-account-styled .woocommerce-form-login__rememberme input {
  width: 16px !important;
  height: 16px !important;
  accent-color: #0a9bcd;
  margin: 0;
}

/* Ligne "Se souvenir de moi" + bouton sur la même ligne */
body.wcppcm-account-styled .woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme):has(button) {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Lien "Mot de passe perdu" */
body.wcppcm-account-styled .woocommerce-LostPassword,
body.wcppcm-account-styled p.lost_password {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  text-align: center;
}
body.wcppcm-account-styled .woocommerce-LostPassword a,
body.wcppcm-account-styled p.lost_password a {
  color: #0a9bcd !important;
  text-decoration: none !important;
  font-weight: 600;
}
body.wcppcm-account-styled .woocommerce-LostPassword a:hover,
body.wcppcm-account-styled p.lost_password a:hover {
  text-decoration: underline !important;
}

/* Texte politique de confidentialité dans le form register */
body.wcppcm-account-styled .woocommerce-form-register .woocommerce-privacy-policy-text {
  margin: 14px 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border-left: 3px solid #0a9bcd !important;
}
body.wcppcm-account-styled .woocommerce-form-register .woocommerce-privacy-policy-text a {
  color: #0a9bcd;
  text-decoration: none;
  font-weight: 600;
}

/* Mobile : hero plus compact, cards stack */
@media (max-width: 768px) {
  body.wcppcm-account-styled .wcppcm-login-hero {
    margin-bottom: 20px;
  }
  body.wcppcm-account-styled h1.wcppcm-login-hero__title,
  body.wcppcm-account-styled .wcppcm-login-hero__title {
    font-size: 22px !important;
  }
  body.wcppcm-account-styled .wcppcm-login-hero__sub {
    font-size: 13px !important;
  }
  body.wcppcm-account-styled .woocommerce-form-login h2,
  body.wcppcm-account-styled .woocommerce-form-register h2,
  body.wcppcm-account-styled h2.woocommerce-LoginHeading,
  body.wcppcm-account-styled h2.woocommerce-RegisterHeading {
    font-size: 17px !important;
  }
  body.wcppcm-account-styled .wcppcm-login-hero__icon {
    width: 56px;
    height: 56px;
  }
  body.wcppcm-account-styled .woocommerce-form-login,
  body.wcppcm-account-styled .woocommerce-form-register {
    padding: 22px 18px !important;
  }
  body.wcppcm-account-styled .woocommerce-form-login input,
  body.wcppcm-account-styled .woocommerce-form-register input {
    font-size: 16px !important; /* anti-zoom iOS */
  }
}

/* --- Messages WC (success/info/error) --- */
body.wcppcm-account-styled .woocommerce-message,
body.wcppcm-account-styled .woocommerce-info,
body.wcppcm-account-styled .woocommerce-error {
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.wcppcm-account-styled .woocommerce-message {
  border-left: 4px solid #16a34a !important;
  color: #14532d !important;
}
body.wcppcm-account-styled .woocommerce-info {
  border-left: 4px solid #0a9bcd !important;
}
body.wcppcm-account-styled .woocommerce-error {
  border-left: 4px solid #dc2626 !important;
  color: #7f1d1d !important;
}

/* --- Détail d'une commande (view-order) --- */
body.wcppcm-account-styled .woocommerce-order-details,
body.wcppcm-account-styled .woocommerce-customer-details {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.06);
}

/* --- Mobile : layout en stack + nav scrollable horizontale --- */
@media (max-width: 979px) {
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation {
    position: relative;
    top: auto;
    padding: 8px;
    margin-bottom: 18px;
    border-radius: 12px;
  }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation li {
    flex-shrink: 0;
  }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation li a {
    padding: 8px 12px;
    font-size: 13px;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px;
    white-space: nowrap;
  }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation li.is-active a {
    background: #e0f2fe;
    border-bottom-color: #0a9bcd;
    border-left: none;
    border-radius: 8px;
  }
  body.wcppcm-account-styled .woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-left: 1px solid #f1f5f9 !important;
    margin-left: 4px !important;
    padding-left: 4px !important;
  }
  body.wcppcm-account-styled .wcppcm-account-hero {
    padding: 24px 20px;
  }
  body.wcppcm-account-styled .wcppcm-account-hero__title {
    font-size: 22px;
  }
  body.wcppcm-account-styled .wcppcm-account-hero__main {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 18px;
  }
  body.wcppcm-account-styled .wcppcm-account-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Tableau commandes : on stack les lignes en cards sur mobile (WC le fait nativement) */
  body.wcppcm-account-styled .woocommerce-orders-table tbody td {
    padding: 10px 14px !important;
  }
}

/* ==========================================================================
   PANIER — Affichage des coupons WooCommerce appliqués
   --------------------------------------------------------------------------
   Une ligne par coupon entre Sous-total et Frais, avec montant en vert et
   bouton × discret pour retirer le coupon.
   ========================================================================== */
.wcppcm-cart-recap-row--coupon {
  color: #16a34a;
}
.wcppcm-cart-coupon-code {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wcppcm-cart-coupon-remove {
  display: inline-block;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c !important;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.wcppcm-cart-coupon-remove:hover {
  background: #fecaca;
  transform: scale(1.1);
}
.wcppcm-cart-recap-coupon-amount {
  color: #16a34a;
  font-weight: 700;
}

/* ==========================================================================
   SÉLECTEUR DE NIVEAU DE SERVICE (Express / Économique) — fiche produit
   ========================================================================== */
.wcppcm-service-selector {
  margin: 14px 0;
}
.wcppcm-service-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}
.wcppcm-service-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wcppcm-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 42px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wcppcm-service-card:hover {
  border-color: #bae6fd;
  background: #f8fcff;
}
.wcppcm-service-card.is-active {
  border-color: #0a9bcd;
  background: linear-gradient(180deg, #eff9fd 0%, #ffffff 100%);
  box-shadow: 0 2px 10px rgba(10, 155, 205, 0.15);
}
.wcppcm-service-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.wcppcm-service-card__radio {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s ease;
}
.wcppcm-service-card.is-active .wcppcm-service-card__radio {
  border-color: #0a9bcd;
}
.wcppcm-service-card.is-active .wcppcm-service-card__radio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0a9bcd;
}
.wcppcm-service-card__head {
  display: flex;
  align-items: center;
}
.wcppcm-service-card__label {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.wcppcm-service-card__delay {
  font-size: 12.5px;
  color: #475569;
}
.wcppcm-service-card__from {
  font-size: 12.5px;
  font-weight: 600;
  color: #0771a6;
}
.wcppcm-service-card.is-active .wcppcm-service-card__from {
  color: #0a9bcd;
}
@media (max-width: 600px) {
  .wcppcm-service-options {
    grid-template-columns: 1fr;
  }
}