/* WF Product Options — Touchés & Couleurs */
.wf-po-block{margin:0 0 22px;--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;text-transform:uppercase;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;top:50%;left:50%;transform:translate(-50%,-50%);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; }