/* NAH'WEAR — Éditeur de personnalisation (plein écran, mobile-first) */
.pe-root{
  --pe-bg:#E9E4DA; --pe-panel:#FFFDF9; --pe-ink:#1C1A17; --pe-soft:#6b655d; --pe-line:rgba(28,26,23,.12);
  --pe-acc:#8C3D24; --pe-acc2:#B4552F; --pe-ok:#2f7d4f; --pe-warn:#c2410c; --pe-bad:#c0272d;
  position:fixed; inset:0; z-index:590; display:flex; flex-direction:column;
  height:100vh; height:100dvh; background:var(--pe-bg); color:var(--pe-ink);
  font-family:var(--sans,'Inter',sans-serif); font-size:14px; -webkit-tap-highlight-color:transparent;
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .22s ease;
  overscroll-behavior:contain; user-select:none; -webkit-user-select:none;
}
.pe-root.open{opacity:1; pointer-events:auto; visibility:visible;}
.pe-root *{box-sizing:border-box;}
.pe-root button{font-family:inherit; color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;}
.pe-root input,.pe-root textarea,.pe-root select{font-family:inherit; font-size:16px; color:var(--pe-ink); user-select:text; -webkit-user-select:text;}
.pe-root svg.ic{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* ---------- barre du haut ---------- */
.pe-top{display:flex; align-items:center; gap:.5rem; padding:calc(env(safe-area-inset-top,0px) + .45rem) .6rem .45rem; background:var(--pe-panel); border-bottom:1px solid var(--pe-line); z-index:5;}
.pe-ic{width:40px; height:40px; border-radius:12px; border:0; background:transparent; display:flex; align-items:center; justify-content:center;}
.pe-ic:active{background:var(--pe-line);}
.pe-chip{flex:1; min-width:0; display:flex; align-items:center; gap:.55rem; border:1px solid var(--pe-line); background:#fff; border-radius:14px; padding:.3rem .55rem .3rem .3rem; text-align:left;}
.pe-chip img{width:34px; height:34px; object-fit:contain; border-radius:8px; background:var(--pe-bg);}
.pe-chip .t{display:flex; flex-direction:column; min-width:0; line-height:1.2;}
.pe-chip b{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-chip small{font-size:11px; color:var(--pe-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-chip .chev{margin-left:auto; opacity:.5;}
.pe-done{border:0; background:var(--pe-acc); color:#fff; font-weight:600; font-size:13px; border-radius:100px; padding:.62rem 1rem; white-space:nowrap;}
.pe-done:active{background:var(--pe-acc2);}

/* ---------- zone de travail ---------- */
.pe-work{position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none;
  background:
    radial-gradient(circle at 50% 35%, #F4F0E8 0%, #E6E0D4 100%);}
.pe-work canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block; outline:none;}
.pe-hud{position:absolute; left:0; right:0; top:.6rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; pointer-events:none; padding:0 .6rem;}
.pe-pill{background:rgba(28,26,23,.88); color:#fff; border-radius:100px; padding:.36rem .8rem; font-size:12px; font-weight:500; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(4px);}
.pe-pill.warn{background:var(--pe-bad);}
.pe-pill.hint{background:rgba(255,253,249,.92); color:var(--pe-soft); border:1px solid var(--pe-line);}
.pe-side{position:absolute; right:.6rem; top:3.2rem; display:flex; flex-direction:column; gap:.4rem;}
.pe-side button{width:42px; height:42px; border-radius:12px; border:1px solid var(--pe-line); background:rgba(255,253,249,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.08); position:relative;}
.pe-side button.on{background:var(--pe-ink); color:#fff; border-color:var(--pe-ink);}
.pe-side button .bdg{position:absolute; top:-5px; right:-5px; background:var(--pe-acc); color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.pe-zoomchip{border:1px solid var(--pe-line); background:#fff; border-radius:100px; padding:.4rem .7rem; font-size:12px; font-weight:600; min-width:58px;}

/* ---------- feuille contextuelle ---------- */
.pe-sheet{background:var(--pe-panel); border-top:1px solid var(--pe-line); box-shadow:0 -6px 18px rgba(0,0,0,.08); z-index:6; border-radius:18px 18px 0 0; margin-top:-14px; position:relative;}
.pe-sheet[hidden]{display:none;}
.pe-sh-head{display:flex; flex-direction:column; gap:.1rem; padding:.7rem .75rem .25rem;}
.pe-sh-grip{position:absolute; top:5px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--pe-line);}
.pe-readout{flex:1; min-width:0; line-height:1.25;}
.pe-readout b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-readout span{display:block; font-size:12px; color:var(--pe-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-readout span.bad{color:var(--pe-bad); font-weight:600;}
.pe-acts{display:flex; justify-content:space-between; gap:.1rem; margin-top:.15rem;}
.pe-acts:empty{display:none;}
.pe-acts button{flex:1; max-width:52px; height:38px; border-radius:10px; border:0; background:transparent; display:flex; align-items:center; justify-content:center; position:relative;}
.pe-acts button:active{background:var(--pe-line);}
.pe-acts button.on{background:var(--pe-ink); color:#fff;}
.pe-acts button.danger{color:var(--pe-bad);}
.pe-tabs{display:flex; gap:.25rem; padding:0 .6rem; border-bottom:1px solid var(--pe-line); overflow-x:auto; scrollbar-width:none;}
.pe-tabs::-webkit-scrollbar{display:none;}
.pe-tab{flex:none; border:0; background:none; padding:.55rem .8rem; font-size:13px; font-weight:600; color:var(--pe-soft); border-bottom:2px solid transparent;}
.pe-tab.on{color:var(--pe-ink); border-bottom-color:var(--pe-acc);}
.pe-pane{padding:.7rem .8rem .8rem; height:min(28dvh,236px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
.pe-grid2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem;}
.pe-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem;}
.pe-f{display:flex; flex-direction:column; gap:.2rem; min-width:0;}
.pe-f > label{font-size:11px; font-weight:600; color:var(--pe-soft); text-transform:uppercase; letter-spacing:.03em;}
.pe-num{display:flex; align-items:center; border:1px solid var(--pe-line); background:#fff; border-radius:10px; overflow:hidden;}
.pe-num input{flex:1; min-width:0; width:100%; border:0; padding:.55rem .1rem; text-align:center; background:transparent; font-weight:600; -moz-appearance:textfield;}
.pe-num input::-webkit-outer-spin-button,.pe-num input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.pe-num i{font-style:normal; font-size:12px; color:var(--pe-soft); padding-right:.5rem;}
.pe-num button{border:0; background:transparent; width:26px; align-self:stretch; font-size:17px; color:var(--pe-soft);}
.pe-num button:active{background:var(--pe-line);}
.pe-lock{align-self:end; height:40px; border:1px solid var(--pe-line); background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.pe-lock.on{background:var(--pe-ink); color:#fff; border-color:var(--pe-ink);}
.pe-row{display:flex; align-items:center; gap:.6rem; margin-top:.65rem;}
.pe-row > label{font-size:12px; font-weight:600; min-width:78px; color:var(--pe-soft);}
.pe-row input[type=range]{flex:1; accent-color:var(--pe-acc); height:28px;}
.pe-row .v{font-size:12px; font-weight:600; min-width:44px; text-align:right;}
.pe-btn{border:1px solid var(--pe-line); background:#fff; border-radius:10px; padding:.55rem .8rem; font-size:13px; font-weight:600;}
.pe-btn:active{background:var(--pe-line);}
.pe-btn.pri{background:var(--pe-acc); border-color:var(--pe-acc); color:#fff;}
.pe-btn.dark{background:var(--pe-ink); border-color:var(--pe-ink); color:#fff;}
.pe-btn.on{background:var(--pe-ink); color:#fff; border-color:var(--pe-ink);}
.pe-btns{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.65rem;}
.pe-seg{display:flex; border:1px solid var(--pe-line); border-radius:10px; overflow:hidden; background:#fff;}
.pe-seg button{flex:1; border:0; background:transparent; padding:.5rem .3rem; font-size:13px; font-weight:600; border-right:1px solid var(--pe-line); display:flex; align-items:center; justify-content:center;}
.pe-seg button:last-child{border-right:0;}
.pe-seg button.on{background:var(--pe-ink); color:#fff;}
.pe-txt{width:100%; border:1px solid var(--pe-line); border-radius:12px; padding:.6rem .7rem; background:#fff; resize:none; min-height:64px; font-weight:500; line-height:1.3;}
.pe-fonts{display:flex; gap:.4rem; overflow-x:auto; padding:.15rem 0 .35rem; scrollbar-width:none;}
.pe-fonts::-webkit-scrollbar{display:none;}
.pe-font{flex:none; border:1px solid var(--pe-line); background:#fff; border-radius:10px; padding:.45rem .8rem; font-size:17px; white-space:nowrap;}
.pe-font.on{border-color:var(--pe-ink); box-shadow:0 0 0 1px var(--pe-ink);}
.pe-colors{display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin-top:.2rem;}
.pe-sw{width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--pe-line); padding:0;}
.pe-sw.on{box-shadow:0 0 0 2px var(--pe-ink);}
.pe-colors input[type=color]{width:34px; height:34px; border:0; padding:0; background:none; border-radius:50%; overflow:hidden;}
.pe-note{font-size:12px; color:var(--pe-soft); line-height:1.4; margin-top:.5rem;}
.pe-note.warn{color:var(--pe-warn);}
.pe-note.bad{color:var(--pe-bad); font-weight:600;}

/* ---------- barre principale ---------- */
.pe-bar{display:flex; justify-content:space-around; background:var(--pe-panel); border-top:1px solid var(--pe-line); padding:.3rem .25rem calc(env(safe-area-inset-bottom,0px) + .3rem); z-index:7;}
.pe-bar button{flex:1; max-width:88px; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.4rem .1rem; border-radius:12px; font-size:11px; font-weight:600; color:var(--pe-soft);}
.pe-bar button.on{color:var(--pe-acc); background:rgba(140,61,36,.09);}
.pe-bar button:disabled{opacity:.3;}
.pe-bar button:not(:disabled):active{background:var(--pe-line);}

/* ---------- modales / feuilles pleines ---------- */
.pe-modal{position:absolute; inset:0; z-index:20; display:none; flex-direction:column; justify-content:flex-end; background:rgba(20,18,15,.5);}
.pe-modal.open{display:flex;}
.pe-mcard{background:var(--pe-panel); border-radius:20px 20px 0 0; max-height:88dvh; display:flex; flex-direction:column; min-height:0; animation:peUp .22s ease;}
.pe-mcard.full{height:100%; max-height:100%; border-radius:0;}
@keyframes peUp{from{transform:translateY(24px); opacity:.5}to{transform:none; opacity:1}}
.pe-mhead{display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem .5rem; border-bottom:1px solid var(--pe-line);}
.pe-mhead h3{flex:1; margin:0; font-family:var(--serif,serif); font-size:1.1rem; font-weight:600;}
.pe-mbody{overflow-y:auto; padding:.9rem; -webkit-overflow-scrolling:touch; min-height:0;}
.pe-mfoot{padding:.7rem .9rem calc(env(safe-area-inset-bottom,0px) + .7rem); border-top:1px solid var(--pe-line); display:flex; gap:.5rem; flex-wrap:wrap;}
.pe-mfoot .pe-btn{flex:1; text-align:center; min-width:130px;}

/* sélecteur de vêtement */
.pe-stepper{display:flex; gap:.35rem; padding:.55rem .9rem 0;}
.pe-stepper button{flex:1; border:0; background:none; text-align:left; padding:.3rem 0 .5rem; border-bottom:3px solid var(--pe-line); color:var(--pe-soft); font-size:12px; font-weight:600; line-height:1.2;}
.pe-stepper button small{display:block; font-weight:500; font-size:11px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-stepper button.on{border-bottom-color:var(--pe-acc); color:var(--pe-ink);}
.pe-stepper button.done{border-bottom-color:var(--pe-ink);}
.pe-stepper button:disabled{opacity:.45;}
.pe-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:.65rem;}
.pe-card{border:1.5px solid var(--pe-line); background:#fff; border-radius:16px; padding:.5rem .5rem .65rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.35rem;}
.pe-card .im{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--pe-bg); border-radius:11px; overflow:hidden;}
.pe-card img{max-width:88%; max-height:88%; object-fit:contain;}
.pe-card b{font-size:13px; font-weight:600;}
.pe-card small{font-size:11px; color:var(--pe-soft); display:flex; align-items:center; gap:.3rem; justify-content:center;}
.pe-card small i{width:11px; height:11px; border-radius:50%; border:1px solid var(--pe-line); display:inline-block;}
.pe-card.on{border-color:var(--pe-acc); box-shadow:0 0 0 1px var(--pe-acc);}
.pe-sizes{display:flex; gap:.5rem; flex-wrap:wrap;}
.pe-size{min-width:62px; padding:.85rem .5rem; border:1.5px solid var(--pe-line); background:#fff; border-radius:14px; font-size:16px; font-weight:700;}
.pe-size.on{background:var(--pe-ink); color:#fff; border-color:var(--pe-ink);}
.pe-info{background:#fff; border:1px solid var(--pe-line); border-radius:14px; padding:.8rem .9rem; margin-top:.9rem; font-size:13px; line-height:1.5;}
.pe-info b{font-weight:700;}
.pe-info table{width:100%; border-collapse:collapse; margin-top:.5rem; font-size:12px;}
.pe-info td,.pe-info th{padding:.28rem .3rem; text-align:center; border-bottom:1px solid var(--pe-line);}
.pe-info tr.on td,.pe-info tr.on th{background:rgba(140,61,36,.1); font-weight:700;}

/* motifs */
.pe-motifs{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:.5rem;}
.pe-motif{aspect-ratio:1; border:1.5px solid var(--pe-line); background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:.5rem;}
.pe-motif img{width:100%; height:100%; object-fit:contain;}
.pe-motif:active{border-color:var(--pe-acc);}
.pe-sect{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pe-soft); margin:.2rem 0 .5rem;}
.pe-up{border:2px dashed var(--pe-line); border-radius:14px; padding:.9rem; text-align:center; font-size:13px; color:var(--pe-soft); background:#fff; width:100%; margin-bottom:1rem;}

/* calques / résumé */
.pe-list{display:flex; flex-direction:column; gap:.4rem;}
.pe-li{display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border:1px solid var(--pe-line); border-radius:12px; background:#fff; text-align:left; width:100%;}
.pe-li.on{border-color:var(--pe-acc); box-shadow:0 0 0 1px var(--pe-acc);}
.pe-li .th{width:38px; height:38px; border-radius:8px; background:var(--pe-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;}
.pe-li .th img,.pe-li .th canvas{max-width:90%; max-height:90%;}
.pe-li .tx{flex:1; min-width:0; line-height:1.3;}
.pe-li .tx b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pe-li .tx span{display:block; font-size:12px; color:var(--pe-soft);}
.pe-li .tx span.bad{color:var(--pe-bad); font-weight:600;}
.pe-li .tx span.warn{color:var(--pe-warn);}
.pe-sum{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.9rem;}
.pe-kpi{background:#fff; border:1px solid var(--pe-line); border-radius:14px; padding:.65rem .8rem;}
.pe-kpi small{display:block; font-size:11px; color:var(--pe-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.pe-kpi b{font-size:18px; font-weight:700;}
.pe-toast{position:absolute; left:50%; bottom:5.4rem; transform:translateX(-50%); background:var(--pe-ink); color:#fff; padding:.55rem 1rem; border-radius:100px; font-size:13px; z-index:40; max-width:88%; text-align:center; opacity:0; transition:opacity .2s; pointer-events:none;}
.pe-toast.show{opacity:1;}
.pe-empty{text-align:center; color:var(--pe-soft); padding:1.2rem .5rem; font-size:13px; line-height:1.5;}

/* ---------- bureau : panneau flottant à droite ---------- */
@media (min-width:900px){
  .pe-sheet{position:absolute; right:14px; top:76px; max-height:calc(100% - 170px); width:352px; margin:0; border-radius:16px; border:1px solid var(--pe-line); display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.14);}
  .pe-sheet[hidden]{display:none;}
  .pe-pane{height:auto; flex:1 1 auto; min-height:0;}
  .pe-chip{max-width:460px;}
  .pe-root:not(.sheet-on) .pe-sheet{display:none;}
  .pe-sh-grip{display:none;}
  .pe-root.sheet-on .pe-side{right:380px;}
  .pe-modal{align-items:center; justify-content:center;}
  .pe-mcard{border-radius:20px; width:min(760px,94%); max-height:88vh;}
  .pe-mcard.full{height:auto; width:min(860px,94%); max-height:92vh; border-radius:20px;}
  .pe-bar{justify-content:center; gap:.4rem;}
  .pe-bar button{max-width:96px; flex:none; width:82px;}
}

/* la visite guidée du site ne doit jamais passer au-dessus de l'éditeur */
html.pe-lock #tourScrim, html.pe-lock #tourTooltip{display:none !important;}

/* ================= v5 : aide, tutoriel, alerte zone, validation ================= */
.pe-help{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--pe-line); background:#fff; font-weight:700; font-size:16px; color:var(--pe-acc); flex:none;}
.pe-alert{pointer-events:auto; background:#fff; border:1.5px solid var(--pe-bad); color:var(--pe-ink); border-radius:14px; padding:.55rem .7rem; box-shadow:0 6px 18px rgba(192,39,45,.22); width:min(100%,420px); display:flex; flex-direction:column; gap:.45rem;}
.pe-alert .tx{font-size:13px; font-weight:700; color:var(--pe-bad); line-height:1.25;}
.pe-alert .tx small{display:block; font-weight:500; color:var(--pe-soft); font-size:12px; margin-top:.1rem;}
.pe-alert .bt{display:flex; gap:.4rem;}
.pe-alert .bt button{flex:1; border:1px solid var(--pe-line); background:#fff; border-radius:10px; padding:.5rem .4rem; font-size:12.5px; font-weight:700;}
.pe-alert .bt button:first-child{background:var(--pe-bad); border-color:var(--pe-bad); color:#fff;}
.pe-glow{animation:peGlow 1.2s ease-in-out infinite; position:relative; z-index:31;}
@keyframes peGlow{0%,100%{box-shadow:0 0 0 0 rgba(140,61,36,.0)}50%{box-shadow:0 0 0 6px rgba(140,61,36,.35)}}
.pe-tuto{position:absolute; inset:0; z-index:30; pointer-events:none;}
.pe-tcard{pointer-events:auto; position:absolute; left:.6rem; right:.6rem; background:#fff; border-radius:18px; box-shadow:0 10px 34px rgba(0,0,0,.28); padding:.75rem .85rem .7rem; display:grid; grid-template-columns:88px 1fr; gap:.2rem .7rem; max-width:520px; margin:0 auto;}
.pe-tcard.bot{bottom:calc(env(safe-area-inset-bottom,0px) + 74px);}
.pe-tcard.top{top:calc(env(safe-area-inset-top,0px) + 62px);}
.pe-tcard .ill{grid-row:1; background:var(--pe-bg); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:.2rem;}
.pe-tcard .ill svg{width:100%; height:auto; display:block;}
.pe-tcard .bd small{font-size:11px; font-weight:700; color:var(--pe-acc); text-transform:uppercase; letter-spacing:.05em;}
.pe-tcard .bd h4{margin:.1rem 0 .25rem; font-family:var(--serif,serif); font-size:1.02rem; font-weight:600;}
.pe-tcard .bd p{margin:0; font-size:13px; line-height:1.4; color:var(--pe-ink);}
.pe-tcard .ft{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.35rem;}
.pe-tcard .lnk{border:0; background:none; color:var(--pe-soft); font-size:13px; font-weight:600; padding:.4rem .2rem; min-width:52px; text-align:left;}
.pe-tcard .dots{display:flex; gap:5px;} .pe-tcard .dots i{width:7px; height:7px; border-radius:50%; background:var(--pe-line);} .pe-tcard .dots i.on{background:var(--pe-acc); width:18px; border-radius:4px;}
.pe-tcard .nv{display:flex; gap:.35rem;}
.pe-help-list{margin-top:.9rem; display:flex; flex-direction:column; gap:.4rem;}
.pe-help-list details{border:1px solid var(--pe-line); border-radius:12px; background:#fff; padding:.1rem .8rem;}
.pe-help-list summary{cursor:pointer; padding:.7rem 0; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.pe-help-list summary::-webkit-details-marker{display:none;}
.pe-help-list summary::after{content:'+'; font-size:18px; color:var(--pe-soft);}
.pe-help-list details[open] summary::after{content:'−';}
.pe-help-list details p{margin:0 0 .8rem; font-size:13.5px; line-height:1.5; color:var(--pe-ink);}
.pe-order{display:flex; flex-direction:column; gap:.7rem;}
.pe-order .pe-f > label{font-size:11px; font-weight:600; color:var(--pe-soft); text-transform:uppercase; letter-spacing:.03em;}
.pe-in{width:100%; border:1px solid var(--pe-line); border-radius:10px; padding:.6rem .7rem; background:#fff; font-size:16px; resize:none;}
.pe-qty{display:flex; align-items:center; gap:.2rem; border:1px solid var(--pe-line); background:#fff; border-radius:10px; width:max-content;}
.pe-qty button{border:0; background:transparent; width:44px; height:42px; font-size:20px;} .pe-qty button:active{background:var(--pe-line);}
.pe-qty b{min-width:38px; text-align:center; font-size:16px;}
.pe-adv{margin-top:1rem; font-size:13px; color:var(--pe-soft);} .pe-adv summary{cursor:pointer; padding:.3rem 0;}
.pe-prog{display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:2.2rem 1rem; text-align:center;}
.pe-prog .spin{width:38px; height:38px; border-radius:50%; border:4px solid var(--pe-line); border-top-color:var(--pe-acc); animation:peSpin .9s linear infinite;}
@keyframes peSpin{to{transform:rotate(360deg)}}
.pe-prog .bar{width:min(320px,90%); height:8px; border-radius:4px; background:var(--pe-line); overflow:hidden;} .pe-prog .bar i{display:block; height:100%; background:var(--pe-acc); transition:width .4s ease;}
.pe-prog small{color:var(--pe-soft);}
.pe-ok{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:.6rem .3rem;}
.pe-ok .chk{width:54px; height:54px; border-radius:50%; background:var(--pe-ok); color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center; font-weight:700;}
.pe-ok.bad .chk{background:var(--pe-bad);}
.pe-ok h4{margin:.2rem 0 0; font-family:var(--serif,serif); font-size:1.25rem;}
.pe-ok .lab{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--pe-soft); margin-top:.3rem;}
.pe-ok .code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.35rem; font-weight:700; letter-spacing:.04em; background:#fff; border:1.5px dashed var(--pe-acc); border-radius:12px; padding:.45rem .9rem; user-select:all; -webkit-user-select:all;}
.pe-ok img{width:min(240px,70%); border-radius:12px; border:1px solid var(--pe-line); margin:.4rem 0;}
.pe-ok p{margin:.2rem 0; font-size:14px; line-height:1.45;}

.pe-top{gap:.35rem;} .pe-zoomchip{padding:.4rem .5rem; min-width:50px;} .pe-help{width:34px; height:34px;} .pe-done{padding:.62rem .85rem;}

/* sélecteur de motifs : recherche + catégories */
.pe-msearch{margin:.2rem 0 .6rem;}
.pe-mcats{display:flex; gap:.4rem; overflow-x:auto; padding:.1rem 0 .7rem; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.pe-mcats::-webkit-scrollbar{display:none;}
.pe-mcat{flex:none; padding:.5rem .85rem; border-radius:100px; border:1px solid var(--pe-line); background:#fff; font-size:13px; font-weight:600; white-space:nowrap; color:var(--pe-ink);}
.pe-mcat i{font-style:normal; font-weight:500; opacity:.6; margin-left:.15rem;}
.pe-mcat.on{background:var(--pe-ink); color:#fff; border-color:var(--pe-ink);} .pe-mcat.on i{opacity:.8;}
.pe-motif img{-webkit-user-drag:none;}

/* face / dos */
.pe-faces{position:absolute; left:50%; top:.45rem; transform:translateX(-50%); z-index:6; display:flex; gap:2px; background:#fff; border:1px solid var(--pe-line); border-radius:100px; padding:3px; box-shadow:0 6px 18px rgba(0,0,0,.12);}
.pe-faces[hidden]{display:none;}
.pe-faces button{padding:.5rem 1rem; border-radius:100px; font-size:13px; font-weight:700; color:var(--pe-ink); min-width:76px;}
.pe-faces button i{font-style:normal; display:inline-block; min-width:18px; height:18px; line-height:18px; border-radius:9px; font-size:11px; margin-left:.25rem; background:rgba(0,0,0,.1); text-align:center;}
.pe-faces button.on{background:var(--pe-ink); color:#fff;} .pe-faces button.on i{background:rgba(255,255,255,.25);}
.pe-root.has-faces .pe-hud{top:3.9rem;}

/* sélecteur de motifs : navigation visuelle */
.pe-motifs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.6rem;}
.pe-motif{aspect-ratio:auto; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:.35rem .35rem .45rem; gap:.3rem; text-align:center; background:#fff;}
.pe-motif .im{display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:repeating-conic-gradient(#f4efe6 0% 25%, #fbf8f2 0% 50%) 50%/16px 16px; border-radius:10px; padding:.3rem;}
.pe-motif .im img{width:100%; height:100%; object-fit:contain;}
.pe-motif .cap{font-size:11.5px; line-height:1.2; color:var(--pe-ink); font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em;}
.pe-mcat .av{display:inline-flex; width:26px; height:26px; border-radius:50%; overflow:hidden; background:#f4efe6; align-items:center; justify-content:center; margin-right:.4rem; vertical-align:middle; flex:none;}
.pe-mcat .av img{width:100%; height:100%; object-fit:cover;}
.pe-mcat .av.home{font-size:14px; color:var(--pe-acc);}
.pe-mcat{display:inline-flex; align-items:center;}
.pe-mcat.on .av{background:#fff;}
.pe-shead{display:flex; align-items:baseline; gap:.6rem; margin:.4rem 0 .6rem; flex-wrap:wrap;}
.pe-shead b{font-family:var(--serif,serif); font-size:1.05rem;} .pe-shead small{color:var(--pe-soft); font-size:12px;}
.pe-shead.back{align-items:center; flex-wrap:nowrap;} .pe-shead.back .pe-btn{padding:.45rem .8rem; flex:none;} .pe-shead.back b{flex:1;}
.pe-newrow{display:flex; gap:.6rem; overflow-x:auto; padding:.1rem .1rem .8rem; margin:0 -.9rem .3rem; padding-left:.9rem; padding-right:.9rem; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.pe-newrow::-webkit-scrollbar{display:none;}
.pe-motif.sm{flex:none; width:104px;}
.pe-ccards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem;}
.pe-ccard{background:#fff; border:1.5px solid var(--pe-line); border-radius:16px; padding:.5rem; text-align:left; display:flex; flex-direction:column; gap:.5rem;}
.pe-ccard:active{border-color:var(--pe-acc);}
.pe-ccard .mos{display:grid; grid-template-columns:1fr 1fr; gap:4px; aspect-ratio:1; background:#f7f3ea; border-radius:11px; padding:4px; overflow:hidden;}
.pe-ccard .mos.m1{grid-template-columns:1fr;} .pe-ccard .mos.m2,.pe-ccard .mos.m3{grid-template-rows:1fr;} 
.pe-ccard .mos img{width:100%; height:100%; object-fit:contain; background:#fff; border-radius:8px; padding:3px;}
.pe-ccard .tt{display:flex; flex-direction:column; padding:0 .2rem .2rem;} .pe-ccard .tt b{font-size:.92rem;} .pe-ccard .tt small{color:var(--pe-soft); font-size:12px;}
.pe-allbtn{width:100%; margin-top:.9rem;}
@media (min-width:700px){ .pe-ccards{grid-template-columns:repeat(3,minmax(0,1fr));} }

.pe-motif .im{position:relative; overflow:hidden;}
.pe-motif .im img{position:absolute; inset:.3rem; width:calc(100% - .6rem); height:calc(100% - .6rem);}