/* WF Product Options — Touchés & Couleurs */
.wf-po-block{margin:0px;--wf-green:#37b34a;--wf-ink:#2f2f2f;--wf-muted:#8a8a8a;}
.wf-po-title{font-weight:800;font-size:1.15rem;color:var(--wf-ink);margin:0 0 12px;}

/* Pastilles Touché */
.wf-po-touches{display:flex;flex-wrap:wrap;gap:14px;}
.wf-po-touche{position:relative;border:1px solid #ececec;background:#fff;border-radius:14px;padding:16px 22px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--wf-ink);cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.10);transition:all .15s;}
.wf-po-touche:hover{border-color:#d8d8d8;}
.wf-po-touche.is-selected{background:var(--wf-ink);border-color:var(--wf-ink);color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.20);}
.wf-po-touche.is-selected::after{content:"";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--wf-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);}

/* Bloc Couleur */
.wf-po-couleur-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.wf-po-dot{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.wf-po-couleur-name{color:var(--wf-muted);font-size:1.1rem;}
.wf-po-modify{display:inline-flex;align-items:center;gap:12px;background:#fff;border:0;border-radius:14px;padding:14px 22px;font-weight:800;letter-spacing:.02em;color:var(--wf-ink);cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.12);transition:filter .15s;}
.wf-po-modify:hover{filter:brightness(.97);}
.wf-po-modify svg{width:26px;height:26px;flex:0 0 auto;}

/* Popup */
.wf-po-modal{position:fixed;inset:0;z-index:99999;display:none;}
.wf-po-modal.is-open{display:block;}
.wf-po-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.wf-po-modal__box{position:absolute;width:min(760px,94vw);max-height:90vh;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.wf-po-modal__head{background:#111;color:#fff;padding:22px 26px 20px;position:relative;flex:0 0 auto;}
.wf-po-modal__head h2{margin:0 0 16px;text-align:center;font-size:1.6rem;font-weight:800;color:#fff;}
.wf-po-modal__close{position:absolute;top:16px;right:18px;background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:6px;}
.wf-po-search{width:100%;border:0;border-radius:999px;padding:14px 22px;font-size:1rem;background:#fff;color:#222;}
.wf-po-modal__body{overflow:auto;padding:8px 26px 12px;flex:1 1 auto;}
.wf-po-acc__head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;border-bottom:2px solid #111;padding:18px 4px;font-size:1.15rem;font-weight:800;color:#111;cursor:pointer;text-align:left;}
.wf-po-acc__head .wf-po-chev{transition:transform .2s;}
.wf-po-acc.is-open .wf-po-chev{transform:rotate(180deg);}
.wf-po-acc__panel{display:none;padding:18px 2px 8px;}
.wf-po-acc.is-open .wf-po-acc__panel{display:block;}
.wf-po-grid{display:flex;flex-wrap:wrap;gap:14px;}
.wf-po-color{width:56px;height:56px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .1s;}
.wf-po-color:hover{transform:scale(1.08);}
.wf-po-color.is-picked{outline:3px solid #37b34a;outline-offset:2px;}
.wf-po-color[data-hidden="1"]{display:none;}
.wf-po-acc[data-empty="1"]{display:none;}
.wf-po-acc[data-touche-off="1"]{display:none;}
.wf-po-modal__foot{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 26px;border-top:1px solid #eee;}
.wf-po-foot-current{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--wf-muted);}
.wf-po-validate{background:#111;color:#fff;border:0;border-radius:10px;padding:16px 28px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.wf-po-validate:hover{filter:brightness(1.15);}
body.wf-po-lock{overflow:hidden;}

/* ===== Relooking : Choisir le support (icones) ===== */
.wf-po-title{ text-transform:uppercase; letter-spacing:.02em; }
.wf-po-support{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#fff; border:2px solid #e6e8ee; border-radius:16px; padding:12px 14px; min-width:96px; min-height:96px; color:#1b1f2a; font-weight:600; text-transform:none; letter-spacing:0; line-height:1.15; box-shadow:none; cursor:pointer; transition:border-color .15s,color .15s,box-shadow .15s; }
.wf-po-support:hover{ border-color:#c7ccd8; }
.wf-po-support .wf-po-touche-ico{ width:42px; height:42px; object-fit:contain; display:block; }
.wf-po-support .wf-po-touche-lbl{ font-size:.82rem; text-align:center; text-transform:none; font-weight:600; }
.wf-po-support.is-selected{ border-color:#2563eb; color:#2563eb; background:#fff; box-shadow:0 2px 12px rgba(37,99,235,.18); }
.wf-po-support.is-selected .wf-po-touche-ico{ filter:invert(34%) sepia(93%) saturate(1700%) hue-rotate(212deg) brightness(97%) contrast(95%); }
.wf-po-support.is-selected::after,.wf-po-support::after{ content:none!important; display:none!important; }
.wf-po-touche-block .wf-po-touches{ gap:12px; }
/* Conditionnement (radio Bidon/Aerosol) */
.wf-po-cond-block .wf-po-conds{ display:flex; gap:14px; flex-wrap:wrap; }
.wf-po-cond{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border:1.5px solid #e6e8ee; border-radius:10px; cursor:pointer; color:#1b2130; text-decoration:none; font-weight:600; background:#fff; transition:border-color .15s,color .15s; }
.wf-po-cond:hover{ border-color:#c7ccd8; }
.wf-po-radio{ width:16px; height:16px; border-radius:50%; border:2px solid #c3c9d0; display:inline-block; position:relative; flex:0 0 auto; }
.wf-po-cond.is-selected{ border-color:#2563eb; color:#2563eb; }
.wf-po-cond.is-selected .wf-po-radio{ border-color:#2563eb; }
.wf-po-cond.is-selected .wf-po-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:#0A1432; }
/* ===== Popup couleur - Figma ===== */
.wf-po-modal__box{ max-width:580px!important; width:94%!important; max-height:92vh!important; border-radius:18px!important; padding:26px 28px 96px!important; overflow-y:auto!important; position:relative!important; }
.wf-po-modal__head{ position:relative!important; margin-bottom:16px!important; border:0!important; display:block!important; }
.wf-po-modal__close{ display:inline-flex!important; align-items:center!important; gap:8px!important; background:#eef0f6!important; color:#3a4258!important; border:0!important; border-radius:10px!important; padding:10px 16px!important; font-size:1rem!important; cursor:pointer; position:static!important; margin:0 0 16px!important; width:auto!important; height:auto!important; }
.wf-po-modal__head h2{ font-weight:800!important; font-style:italic!important; font-size:1.9rem!important; color:#141a33!important; margin:0 0 16px!important; }
.wf-po-search{ width:100%!important; background:#e9ebf1!important; border:0!important; border-radius:12px!important; padding:14px 18px!important; font-size:1rem!important; box-sizing:border-box; }
.wf-po-acc{ border:0!important; }
.wf-po-acc__head{ font-weight:800!important; font-size:1.15rem!important; color:#141a33!important; background:transparent!important; border:0!important; border-bottom:2px solid #141a33!important; padding:12px 0!important; width:100%!important; text-align:left!important; cursor:pointer; margin-top:10px!important; border-radius:0!important; }
.wf-po-chev{ float:right; }
.wf-po-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:4px 24px!important; padding:14px 0!important; }
.wf-po-color{ display:flex!important; align-items:center!important; gap:16px!important; background:transparent!important; border:0!important; border-radius:12px!important; padding:8px 12px!important; cursor:pointer; text-align:left!important; width:100%!important; }
.wf-po-color:hover{ background:#f3f4f9!important; }
.wf-po-color.is-picked{ background:#eef0fb!important; }
.wf-po-color-dot{ width:46px!important; height:46px!important; border-radius:50%!important; flex:0 0 auto!important; border:1px solid rgba(0,0,0,.08)!important; display:block; }
.wf-po-color-name{ font-size:1.05rem!important; color:#141a33!important; }
.wf-po-color.is-picked .wf-po-color-name{ font-weight:700!important; }
.wf-po-modal__foot{ position:absolute!important; bottom:0; left:0; right:0; padding:16px 28px!important; display:flex!important; justify-content:flex-end!important; align-items:center!important; background:#fff!important; border-top:1px solid #eef0f4!important; }
.wf-po-foot-current{ display:none!important; }
.wf-po-validate{ background:#141a33!important; color:#fff!important; border:0!important; border-radius:10px!important; padding:14px 30px!important; font-size:1.05rem!important; cursor:pointer; font-weight:600; }
.wf-po-validate::after{ content:" \2713"; }
/* ===== Volet lateral droit anime (Figma) ===== */
#wf-po-modal{ position:fixed!important; inset:0!important; display:block!important; visibility:visible!important; opacity:1!important; pointer-events:none!important; overflow:hidden!important; z-index:99999; }
#wf-po-modal.is-open{ pointer-events:auto!important; }
.wf-po-modal__overlay{ position:absolute!important; inset:0!important; background:rgba(10,15,30,.5)!important; opacity:0; }
#wf-po-modal.is-open .wf-po-modal__overlay{ opacity:1; animation:wfPoFadeIn .35s ease both; }
.wf-po-modal__box{ position:absolute!important; top:0!important; right:0!important; left:auto!important; width:min(480px,96vw)!important; max-width:none!important; height:100vh!important; max-height:100vh!important; border-radius:0!important; padding:0!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; box-shadow:-12px 0 44px rgba(0,0,0,.28)!important; }
#wf-po-modal:not(.is-open) .wf-po-modal__box{ transform:translateX(100%)!important; }
#wf-po-modal.is-open .wf-po-modal__box{ transform:translateX(0); animation:wfPoSlideIn .42s cubic-bezier(.16,1,.3,1) both; }
.wf-po-modal__head{ background:#fff!important; color:#141a33!important; flex:0 0 auto!important; padding:24px 26px 16px!important; }
.wf-po-modal__body{ flex:1 1 auto!important; overflow-y:auto!important; padding:0 26px!important; }
.wf-po-modal__foot{ position:static!important; flex:0 0 auto!important; padding:16px 26px!important; box-shadow:0 -4px 16px rgba(0,0,0,.05)!important; }
@keyframes wfPoSlideIn{ from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes wfPoFadeIn{ from{opacity:0} to{opacity:1} }

/* Volet couleur - correctif debordement + libelle */
#wf-po-modal .wf-po-grid{ grid-template-columns:1fr 1fr!important; gap:6px 16px!important; }
#wf-po-modal .wf-po-color{ box-sizing:border-box!important; min-width:0!important; gap:10px!important; padding:8px 10px!important; }
#wf-po-modal .wf-po-color-dot{ width:38px!important; height:38px!important; }
#wf-po-modal .wf-po-color-name{ min-width:0!important; flex:1 1 auto!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:.95rem!important; line-height:1.2!important; }

/* Volet couleur - correctif recherche (priorite sur display:flex!important) */
#wf-po-modal .wf-po-color[data-hidden="1"]{ display:none!important; }
#wf-po-modal .wf-po-acc[data-empty="1"]{ display:none!important; }

/* Volet couleur - etape support (Figma) */
#wf-po-modal .wf-po-support-step{ padding:6px 0 2px; }
#wf-po-modal .wf-po-step-title{ font-weight:800; font-style:italic; color:#141a33; font-size:1.2rem; margin:6px 0 12px; }
#wf-po-modal .wf-po-supports{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
#wf-po-modal .wf-po-support{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; background:#fff; border:2px solid #e2e5ee; border-radius:14px; cursor:pointer; color:#0a1432; transition:border-color .15s, box-shadow .15s; font-family:inherit; }
#wf-po-modal .wf-po-support:hover{ border-color:#c3c9db; }
#wf-po-modal .wf-po-support.is-selected{ border-color:#141a33; box-shadow:0 0 0 1px #141a33 inset; }
#wf-po-modal .wf-po-support svg{ width:30px; height:30px; display:block; }
#wf-po-modal .wf-po-support-lbl{ font-weight:600; font-size:.95rem; line-height:1.1; text-align:center; }
@media(max-width:640px){ #wf-po-modal .wf-po-supports{ grid-template-columns:repeat(2,1fr); } }

/* Volet couleur - support 2x2 (tient dans le volet 480px) */
#wf-po-modal .wf-po-supports{ grid-template-columns:repeat(2,1fr)!important; gap:12px!important; }
#wf-po-modal .wf-po-supports .wf-po-support{ min-width:0!important; box-sizing:border-box!important; }
#wf-po-modal .wf-po-supports .wf-po-support-lbl{ font-size:.95rem!important; }

/* bloc usage (type de support) */
.wf-po-usage-block .wf-po-usages{ display:flex; flex-wrap:wrap; gap:12px; }
.wf-po-usage{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border:1.5px solid #e6e8ee; border-radius:12px; background:#fff; color:#1b2130; font-weight:600; font-family:inherit; cursor:pointer; text-align:left; line-height:1.2; transition:border-color .15s,color .15s,box-shadow .15s; }
.wf-po-usage:hover{ border-color:#c7ccd8; }
.wf-po-usage.is-selected{ border-color:#141a33; color:#141a33; box-shadow:0 0 0 1px #141a33 inset; }
.wf-po-usage-lbl{ min-width:0; }
@media(max-width:640px){ .wf-po-usage-block .wf-po-usages{ flex-direction:column; } .wf-po-usage{ width:100%; box-sizing:border-box; } }

/* Contenance non proposee pour le support choisi */
.wf-po-cardx .wf-po-cont-block .wfvs-swatches .wfvs-swatch.wf-po-cont-off,.wf-po-cont-block .wfvs-swatch.wf-po-cont-off,.wfvs-swatches .wfvs-swatch.wf-po-cont-off{display:none!important;}

.wf-po-cont-price del{font-size:.8em;opacity:.65;margin-right:6px;font-weight:400;text-decoration:line-through}.wf-po-cont-price ins{text-decoration:none;font-weight:700}