/* ===== CONFIGURATEUR FLOCAGE ===== */
.cfg-page{font-family:"Inter",sans-serif;max-width:1200px;margin:0 auto;padding:3rem 1.5rem 5rem;color:#F0EDE8;position:relative;z-index:1}
.cfg-header{text-align:center;padding:2rem 0 3.5rem}
.cfg-header h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-0.04em;margin:0.5rem 0 1rem;background:linear-gradient(135deg,#FFF0E1,#C4B5FD);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cfg-header .cfg-sub{color:rgba(240,237,232,0.45);font-size:1rem;line-height:1.7}
.cfg-label{font-size:0.7rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:rgba(139,92,246,0.8);display:block;margin-bottom:0.75rem}

/* LAYOUT */
.cfg-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}

/* VISUEL */
.cfg-visual{position:sticky;top:100px}
.cfg-product-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;background:rgba(255,255,255,0.03);padding:4px;border-radius:12px;border:1px solid rgba(255,240,225,0.07)}
.cfg-tab{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:rgba(240,237,232,0.45);font-size:0.78rem;font-weight:500;cursor:pointer;font-family:"Inter",sans-serif;transition:all 0.2s}
.cfg-tab.active{background:rgba(255,240,225,0.08);color:#F0EDE8;box-shadow:0 0 0 1px rgba(255,240,225,0.1)}
.cfg-product-container{background:#F0EDE8!important;border:1px solid rgba(200,190,180,0.4)!important;border-radius:20px!important;padding:2rem!important;display:flex!important;flex-direction:column!important;align-items:center!important;min-height:380px!important;position:relative!important}.cfg-tshirt-svg{position:relative;z-index:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.3))}.cfg-zone.active-zone{fill:rgba(139,92,246,0.25)!important;stroke:#8B5CF6!important;stroke-width:2.5!important;stroke-dasharray:0!important}.cfg-zone-tip{font-size:0.72rem;color:rgba(40,30,20,0.4);text-align:center;margin-top:0.75rem;position:relative;z-index:1}
.cfg-tshirt-svg{width:100%;max-width:320px;transition:all 0.3s ease}
.cfg-garment{transition:fill 0.3s ease}

/* Zones hover */
.cfg-zone{cursor:pointer;transition:fill 0.2s;stroke:transparent;stroke-width:2}
.cfg-zone:hover{fill:rgba(255,255,255,0.1)!important;stroke:rgba(255,255,255,0.5);stroke-dasharray:5}
.cfg-zone.active-zone{fill:rgba(139,92,246,0.15)!important;stroke:rgba(139,92,246,0.6)!important;stroke-dasharray:0}

/* Couleurs */
.cfg-color-section{margin-top:1.5rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,240,225,0.07);border-radius:14px;padding:1.25rem}
.cfg-label-sm{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(240,237,232,0.4);margin-bottom:0.75rem;display:block}
.cfg-colors{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem}
.cfg-color{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.2s;padding:0}
.cfg-color:hover{transform:scale(1.1)}
.cfg-color.active{border-color:#FFF0E1;box-shadow:0 0 0 3px rgba(255,240,225,0.2)}
.cfg-color-name{font-size:0.78rem;color:rgba(240,237,232,0.5)}

/* OPTIONS */
.cfg-options{display:flex;flex-direction:column;gap:1.5rem}
.cfg-option-group{background:rgba(255,255,255,0.02);border:1px solid rgba(255,240,225,0.07);border-radius:14px;padding:1.25rem}

/* Tailles */
.cfg-sizes{display:flex;flex-wrap:wrap;gap:0.5rem}
.cfg-size{padding:8px 14px;border:1px solid rgba(255,240,225,0.1);border-radius:8px;background:transparent;color:rgba(240,237,232,0.5);font-size:0.78rem;font-weight:500;cursor:pointer;font-family:"Inter",sans-serif;transition:all 0.2s}
.cfg-size:hover{border-color:rgba(255,240,225,0.25);color:#F0EDE8}
.cfg-size.active{border-color:rgba(139,92,246,0.5);background:rgba(109,40,217,0.12);color:#C4B5FD}
.cfg-surcharge{font-size:0.65rem;color:rgba(196,181,253,0.7)}

/* Quantité */
.cfg-qty-wrap{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem}
.cfg-qty-btn{width:36px;height:36px;border:1px solid rgba(255,240,225,0.12);border-radius:8px;background:rgba(255,255,255,0.03);color:#F0EDE8;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.cfg-qty-btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,240,225,0.25)}
.cfg-qty-input{width:70px;text-align:center;padding:8px;border:1px solid rgba(255,240,225,0.12);border-radius:8px;background:rgba(255,255,255,0.04);color:#F0EDE8;font-size:1rem;font-family:"Space Grotesk",sans-serif;font-weight:600}
.cfg-qty-input::-webkit-outer-spin-button,.cfg-qty-input::-webkit-inner-spin-button{-webkit-appearance:none}
.cfg-qty-note{font-size:0.65rem;color:rgba(240,237,232,0.35);font-weight:400;font-style:normal}
.cfg-qty-tiers{display:flex;gap:1rem;flex-wrap:wrap}
.cfg-tier{font-size:0.68rem;color:rgba(240,237,232,0.3);background:rgba(255,255,255,0.03);padding:4px 10px;border-radius:20px;border:1px solid rgba(255,240,225,0.06)}

/* Zones checkboxes */
.cfg-zones-list{display:flex;flex-direction:column;gap:0.5rem}
.cfg-zone-option{display:flex;align-items:center;gap:0.75rem;padding:10px 12px;border:1px solid rgba(255,240,225,0.07);border-radius:10px;cursor:pointer;transition:all 0.2s}
.cfg-zone-option:hover{border-color:rgba(139,92,246,0.25);background:rgba(109,40,217,0.05)}
.cfg-zone-option input[type=checkbox]{accent-color:#7C3AED;width:16px;height:16px;cursor:pointer}
.cfg-zone-info{display:flex;align-items:center;justify-content:space-between;flex:1}
.cfg-zone-name{font-size:0.82rem;color:rgba(240,237,232,0.7)}
.cfg-zone-price{font-size:0.72rem;color:rgba(196,181,253,0.7);font-weight:600}

/* Marquage */
.cfg-marking{display:flex;flex-direction:column;gap:0.5rem}
.cfg-mark-option{display:flex;align-items:flex-start;gap:0.75rem;padding:10px 12px;border:1px solid rgba(255,240,225,0.07);border-radius:10px;cursor:pointer;transition:all 0.2s}
.cfg-mark-option:hover{border-color:rgba(139,92,246,0.25);background:rgba(109,40,217,0.05)}
.cfg-mark-option input[type=radio]{accent-color:#7C3AED;margin-top:3px}
.cfg-mark-info{display:flex;flex-direction:column;gap:2px}
.cfg-mark-name{font-size:0.82rem;color:rgba(240,237,232,0.75);font-weight:500}
.cfg-mark-desc{font-size:0.72rem;color:rgba(240,237,232,0.35)}

/* Upload */
.cfg-upload-label{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.5rem;border:1.5px dashed rgba(255,240,225,0.15);border-radius:12px;cursor:pointer;transition:all 0.2s;text-align:center}
.cfg-upload-label:hover{border-color:rgba(139,92,246,0.4);background:rgba(109,40,217,0.05)}
.cfg-upload-icon{font-size:2rem}
.cfg-upload-text{font-size:0.82rem;color:rgba(240,237,232,0.55)}
.cfg-upload-text u{color:rgba(196,181,253,0.8)}
.cfg-upload-sub{font-size:0.7rem;color:rgba(240,237,232,0.3)}
.cfg-optional{font-size:0.65rem;color:rgba(240,237,232,0.3);font-weight:400}
.cfg-upload-hint{font-size:0.72rem;color:rgba(240,237,232,0.28);margin-top:0.5rem;text-align:center}

/* PRIX */
.cfg-price-card{background:linear-gradient(135deg,rgba(109,40,217,0.1),rgba(76,29,149,0.06));border:1px solid rgba(139,92,246,0.25);border-radius:16px;padding:1.5rem;box-shadow:0 0 40px rgba(109,40,217,0.08)}
.cfg-price-breakdown{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.25rem}
.cfg-price-row{display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;color:rgba(240,237,232,0.5)}
.cfg-price-row span:last-child{font-weight:500;color:rgba(240,237,232,0.7)}
.cfg-discount span:last-child{color:rgba(134,239,172,0.8)}
.cfg-price-divider{height:1px;background:rgba(255,240,225,0.08);margin:0.5rem 0}
.cfg-price-unit{color:rgba(240,237,232,0.65)!important}
.cfg-price-unit span:last-child{color:rgba(240,237,232,0.85)!important;font-weight:600!important}
.cfg-price-total{font-size:1rem!important}
.cfg-price-total span{color:#F0EDE8!important;font-weight:700!important}
.cfg-price-total span:last-child{font-size:1.4rem;font-family:"Space Grotesk",sans-serif;font-weight:800;background:linear-gradient(135deg,#FFF0E1,#C4B5FD);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cfg-cta-btn{width:100%;padding:15px;background:linear-gradient(135deg,#7C3AED,#4C1D95);color:#fff;border:none;border-radius:10px;font-size:0.88rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;font-family:"Inter",sans-serif;transition:all 0.2s;box-shadow:0 0 20px rgba(109,40,217,0.25)}
.cfg-cta-btn:hover{background:linear-gradient(135deg,#8B5CF6,#6D28D9);box-shadow:0 0 30px rgba(109,40,217,0.35);transform:translateY(-1px)}
.cfg-cta-note{text-align:center;font-size:0.72rem;color:rgba(240,237,232,0.3);margin-top:0.75rem}

/* MODAL */
.cfg-modal{position:fixed;inset:0;background:rgba(7,6,13,0.85);backdrop-filter:blur(10px);z-index:9999;display:flex;align-items:center;justify-content:center}
.cfg-modal-box{background:#12101A;border:1px solid rgba(139,92,246,0.3);border-radius:20px;padding:3rem 2rem;text-align:center;max-width:400px;box-shadow:0 0 60px rgba(109,40,217,0.2)}
.cfg-modal-icon{font-size:3rem;margin-bottom:1rem;background:linear-gradient(135deg,#6EE7B7,#A78BFA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cfg-modal-box h3{font-family:"Space Grotesk",sans-serif;font-size:1.5rem;color:#F0EDE8;margin:0 0 0.75rem}
.cfg-modal-box p{color:rgba(240,237,232,0.5);font-size:0.9rem;margin:0 0 1.5rem}
.cfg-modal-close{padding:12px 28px;background:rgba(255,240,225,0.08);border:1px solid rgba(255,240,225,0.15);border-radius:8px;color:#F0EDE8;cursor:pointer;font-family:"Inter",sans-serif;font-size:0.82rem;font-weight:500;transition:all 0.2s}
.cfg-modal-close:hover{background:rgba(255,240,225,0.14)}

/* MOBILE */
@media(max-width:900px){.cfg-layout{grid-template-columns:1fr}.cfg-visual{position:static}}
@media(max-width:500px){.cfg-page{padding:2rem 1rem 4rem}.cfg-header{padding:1rem 0 2rem}.cfg-sizes{gap:0.35rem}.cfg-size{padding:7px 10px}}

/* Contact fields */
.cfg-contact-group { margin-top:0; }
.cfg-contact-fields { display:flex; flex-direction:column; gap:0.6rem; }
.cfg-input { width:100%; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,240,225,0.1); border-radius:8px; color:#F0EDE8; font-family:"Inter",sans-serif; font-size:0.85rem; transition:border-color 0.2s; }
.cfg-input:focus { outline:none; border-color:rgba(139,92,246,0.45); background:rgba(255,255,255,0.06); }
.cfg-input::placeholder { color:rgba(240,237,232,0.3); }
.cfg-textarea { resize:vertical; min-height:80px; }

/* Summary */
.cfg-summary-list { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.25rem; }
.cfg-sum-row { display:flex; justify-content:space-between; font-size:0.8rem; padding:5px 0; border-bottom:1px solid rgba(255,240,225,0.05); }
.cfg-sum-row span:first-child { color:rgba(240,237,232,0.38); }
.cfg-sum-row span:last-child { color:rgba(240,237,232,0.75); font-weight:500; text-align:right; max-width:55%; }
.cfg-sum-divider { border-top:1px solid rgba(255,240,225,0.1); padding-top:8px; margin-top:4px; }

/* Zone tip */
.cfg-zone-tip { font-size:0.72rem; color:rgba(240,237,232,0.3); text-align:center; margin-top:0.75rem; }

/* CTA WA */
.cfg-cta-btn { background:linear-gradient(135deg,#25D366,#128C7E); }
.cfg-cta-btn:hover { background:linear-gradient(135deg,#2eeb73,#25D366); box-shadow:0 0 30px rgba(37,211,102,0.3); }

/* Fix visibilité produit — fond clair contrasté */
.cfg-product-container {
  background: #F5F3F0 !important;
  border: 1px solid rgba(255,240,225,0.15) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 380px !important;
  position: relative !important;
}

/* Fond quadrillé subtil (comme Photoshop) pour voir le contour */
.cfg-product-container::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px;
  background-image:
    linear-gradient(45deg, #E8E5E0 25%, transparent 25%),
    linear-gradient(-45deg, #E8E5E0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E8E5E0 75%),
    linear-gradient(-45deg, transparent 75%, #E8E5E0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #F0EDE8;
  opacity: 0.4;
  pointer-events: none;
}

.cfg-tshirt-svg { position: relative; z-index: 1; }

/* Zone active — surbrillance violette */
.cfg-zone.active-zone {
  fill: rgba(139,92,246,0.2) !important;
  stroke: #8B5CF6 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 0 !important;
}

/* Garment — ombre portée */
.cfg-garment { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25)); }