/* =========================================================
   Les Murmures de l'Arbre — Design system client
   Tokens → primitives → composants → vues → responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* couleurs */
  --bg:#faf9f6; --surface:#ffffff; --surface-2:#f5f3ee;
  --line:#e8e4da; --line-strong:#d9d3c6;
  --ink:#17150f; --ink-2:#4a463c; --muted:#8a8474;
  --brand:#4f6b3a; --brand-dark:#3c5230; --brand-soft:#eef2e8;
  --wood:#7a4a21; --wood-soft:#f6efe3;
  --danger:#b3402c; --danger-soft:#fbeae6;
  --gold:#b8924f;
  /* rayons */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  /* ombres */
  --sh-1:0 1px 2px rgba(23,21,15,.05);
  --sh-2:0 2px 6px rgba(23,21,15,.06),0 8px 24px rgba(23,21,15,.05);
  --sh-3:0 12px 40px rgba(23,21,15,.14);
  /* espacements */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  /* transitions */
  --t:160ms cubic-bezier(.2,.6,.3,1);
  --container:1120px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s5)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 3. Primitives ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:42px;padding:0 18px;border-radius:var(--r-full);
  font-size:.92rem;font-weight:550;white-space:nowrap;
  border:1px solid transparent;transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t),color var(--t);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:var(--sh-2)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn-quiet{background:transparent;color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.07)}
.btn-sm{height:34px;padding:0 14px;font-size:.85rem}
.btn-lg{height:52px;padding:0 26px;font-size:1rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:42px;height:42px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);transition:background var(--t),border-color var(--t)}
.icon-btn:hover{background:var(--surface-2)}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:.72rem;font-weight:650}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2);transition:all var(--t)}
.chip:hover{border-color:var(--line-strong);background:var(--surface-2)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:550}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:600;
  background:var(--surface-2);color:var(--muted)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.card-hover:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-strong)}

.stack{display:flex;flex-direction:column;gap:var(--s4)}
.row-x{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.h1{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:680;letter-spacing:-.02em;line-height:1.15}
.h2{font-size:1.25rem;font-weight:640;letter-spacing:-.01em}
.lead{color:var(--ink-2);font-size:1.02rem}

/* ---------- 4. Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--container);margin-inline:auto;padding:10px var(--s5);display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand .logo-img{height:42px;width:auto;border-radius:10px;box-shadow:var(--sh-1)}
.tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.tabs>button,.tabs>a{height:38px;padding:0 14px;border-radius:var(--r-full);font-size:.92rem;font-weight:500;
  color:var(--ink-2);transition:background var(--t),color var(--t);white-space:nowrap;
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:0;background:none}
.tabs>button:hover,.tabs>a:hover{background:var(--surface-2);color:var(--ink)}
.tabs>button.on,.tabs>a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto;flex-shrink:0}
.cart-btn{position:relative;padding:0 16px}
.cart-btn .badge{margin-left:2px}
.burger{display:none}

/* sous-barre (produits) */
.subbar{max-width:var(--container);margin-inline:auto;padding:var(--s4) var(--s5) 0;display:flex;gap:var(--s2);
  flex-wrap:wrap;align-items:center}
.subbar:empty{display:none}
.sm-prod{height:34px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
  font-size:.87rem;color:var(--ink-2);transition:all var(--t);white-space:nowrap}
.sm-prod:hover{background:var(--surface-2);border-color:var(--line-strong)}
.sm-prod.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:550}

/* menu déroulant produit */
.prod-menu{position:relative}
.prod-menu-btn{height:34px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
  font-size:.87rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;transition:all var(--t)}
.prod-menu-btn:hover{background:var(--surface-2)}
.prod-menu.open .prod-menu-btn{background:var(--brand);border-color:var(--brand);color:#fff}
.pm-chev{font-size:.65rem;opacity:.7}
.prod-menu-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;max-width:88vw;z-index:70;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:6px;display:none}
.prod-menu.open .prod-menu-panel{display:block;animation:pop .16s var(--t)}
.prod-menu-panel button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-sm);
  font-size:.9rem;color:var(--ink-2);transition:background var(--t)}
.prod-menu-panel button:hover{background:var(--surface-2);color:var(--ink)}
.prod-menu-panel .pm-compose{font-weight:600;color:var(--brand-dark);border-bottom:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) 0 0;margin-bottom:4px}
.pm-empty{padding:10px 12px;color:var(--muted);font-size:.85rem;font-style:italic}

/* ---------- 5. Recherche & filtres ---------- */
.searchbar{background:var(--surface);border-bottom:1px solid var(--line)}
.searchbar:has(.search[style*="none"]){display:none}
.search{position:relative;max-width:var(--container);margin-inline:auto;padding:12px var(--s5)}
.search input{width:100%;height:44px;padding:0 44px;border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface-2);font-size:.95rem;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.search input:focus{outline:none;background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,107,58,.1)}
.search svg{position:absolute;left:calc(var(--s5) + 16px);top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);pointer-events:none}
.search .clear{position:absolute;right:calc(var(--s5) + 10px);top:50%;transform:translateY(-50%);width:28px;height:28px;
  border-radius:var(--r-full);color:var(--muted);display:none;align-items:center;justify-content:center}
.search .clear:hover{background:var(--surface-2)}

.catbar{max-width:var(--container);margin-inline:auto;padding:var(--s4) var(--s5) 0;position:relative;z-index:36}
.cat-dd{position:relative;display:inline-block}
.cat-dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:260px;height:42px;
  padding:0 16px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);font-size:.92rem;
  font-weight:500;transition:all var(--t);box-shadow:var(--sh-1)}
.cat-dd-btn:hover{border-color:var(--line-strong)}
.cat-dd.open>.cat-dd-btn,.catbar.open .cat-dd-btn{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,107,58,.1)}
.cat-dd-btn .chev{color:var(--muted);font-size:.7rem;transition:transform var(--t)}
.cat-dd.open .cat-dd-btn .chev,.catbar.open .cat-dd-btn .chev{transform:rotate(180deg)}
.cat-dd-panel{position:absolute;top:calc(100% + 8px);left:0;width:340px;max-width:88vw;max-height:56vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px;display:none;z-index:70}
.catbar.open .cat-dd-panel,.cat-dd.open>.cat-dd-panel{display:block;animation:pop .16s var(--t)}
.cat-dd-search{position:sticky;top:0;background:var(--surface);padding:2px 2px 8px;z-index:1}
.cat-dd-search input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:.9rem}
.cat-dd-search input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.cat-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border-radius:var(--r-sm);
  font-size:.9rem;color:var(--ink-2);transition:background var(--t)}
.cat-btn:hover{background:var(--surface-2)}
.cat-btn.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.cat-btn .n{margin-left:auto;font-size:.78rem;color:var(--muted)}
.cat-btn.cat-sub{padding-left:26px;font-size:.86rem}
.cat-grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;
  padding:12px 11px 4px;border-top:1px solid var(--line);margin-top:6px}
.cat-grp:first-of-type{border-top:none;margin-top:0}
.wz-catdd{display:block;margin-bottom:var(--s3)}
.wz-catdd .cat-dd-btn{width:100%}
.wz-catdd .cat-dd-panel{width:100%;max-height:46vh}

/* ---------- 6. Mise en page ---------- */
.wrap{max-width:var(--container);margin-inline:auto;display:flex;align-items:flex-start}
main{flex:1;min-width:0;padding:var(--s6) var(--s5) var(--s8)}
.result-info{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.result-info b{font-size:1.05rem}
.hint{color:var(--muted);font-size:.87rem}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.page-head h2{font-size:1.35rem;font-weight:650;letter-spacing:-.01em}
.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--muted)}
.empty .big{font-size:1.15rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}

/* ---------- 7. Accueil ---------- */
.hero{text-align:center;padding:var(--s8) 0 var(--s6)}
.hero .logo{max-width:300px;margin:0 auto var(--s5);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.hero h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin-bottom:var(--s3)}
.hero p{color:var(--ink-2);font-size:1.06rem;max-width:56ch;margin:0 auto var(--s5)}
.hero-cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:var(--s6);justify-content:center;flex-wrap:wrap;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line)}
.stats>div{text-align:center}
.stats b{display:block;font-size:1.5rem;font-weight:680;color:var(--brand-dark);line-height:1.2}
.stats span,.stats>div{font-size:.85rem;color:var(--muted)}
.section-title{font-size:1.3rem;font-weight:650;letter-spacing:-.01em;margin:var(--s7) 0 var(--s2)}
.section-sub{color:var(--muted);margin-bottom:var(--s5)}

/* grille produits */
.prod-grid,.wz-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s4)}
.prod-card,.wz-prod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:var(--s5) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t),border-color var(--t);color:var(--ink)}
.prod-card:hover,.wz-prod:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand)}
.wp-emoji{font-size:2.2rem;line-height:1}
.wp-name{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.wp-desc{font-size:.85rem;color:var(--muted);line-height:1.45}
.wp-faces{margin-top:4px;font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--muted)}

/* galerie d'exemples */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s4)}
.ex-card{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--sh-1);cursor:zoom-in;transition:transform var(--t),box-shadow var(--t)}
.ex-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ex-card img{width:100%;height:100%;object-fit:cover}
.ex-badge{position:absolute;top:10px;left:10px;background:rgba(23,21,15,.62);backdrop-filter:blur(6px);color:#fff;
  font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:var(--r-full);
  max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2rem;opacity:.35}

/* fiche d'une création réalisée */
/* flèches placées de part et d'autre de l'image, jamais par-dessus */

/* ---------- 8. Catalogue (phrases / mots / illustrations) ---------- */
.grid,.kw-grid{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cat-block{margin-bottom:var(--s7)}
.cat-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.1rem;font-weight:640;letter-spacing:-.01em;
  margin-bottom:var(--s4);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.cat-head .n{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 9px;border-radius:var(--r-full)}
.sub-head{width:100%;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:650;margin:var(--s3) 0 var(--s2)}
.tagwrap{position:relative;display:inline-flex}
.tag{display:inline-flex;align-items:center;padding:10px 16px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);transition:all var(--t);text-align:left;max-width:100%}
.tag:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.tag .txt{font-size:.95rem;color:var(--ink);font-weight:450}
.tag mark,.illus-card mark{background:rgba(184,146,79,.28);color:inherit;border-radius:3px;padding:0 2px}
.kw-groups{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.kw-groups button{height:34px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-size:.86rem;color:var(--ink-2);transition:all var(--t)}
.kw-groups button:hover{background:var(--surface-2)}
.kw-groups button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:550}

.illus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s4)}
.illus-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--sh-1);position:relative;transition:box-shadow var(--t)}
.illus-card:hover{box-shadow:var(--sh-2)}
.illus-card h4{font-size:1rem;font-weight:640;margin-bottom:var(--s3)}
.motif-chips{display:flex;flex-wrap:wrap;gap:6px}
.motif{padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface-2);
  font-size:.84rem;color:var(--ink-2);transition:all var(--t)}
.motif:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
.motif::after{content:" ＋";font-size:.72rem;color:var(--brand)}
.illus-imgs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.imgbox{width:74px;height:74px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.imgbox img{max-width:100%;max-height:100%;object-fit:contain;cursor:pointer}

/* ---------- 9. Modales ---------- */
.overlay{position:fixed;inset:0;background:rgba(23,21,15,.45);backdrop-filter:blur(4px);z-index:100;
  display:none;align-items:center;justify-content:center;padding:var(--s4)}
.overlay.show{display:flex;animation:fade .18s ease}
.modal{background:var(--surface);border-radius:var(--r-xl);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;
  padding:var(--s6);position:relative;box-shadow:var(--sh-3);animation:pop .22s cubic-bezier(.2,.9,.3,1.1)}
.modal.wide{max-width:680px}
/* grand format : le configurateur occupe ~90 % de l'écran, sans jamais le dépasser */
.modal.xl{max-width:min(1180px,92vw);width:92vw;max-height:92vh}
/* pleine page (essai) : le configurateur remplit tout l'écran */
.overlay.full{padding:0}
.modal.full{max-width:100%;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
/* contenu recentré et lisible malgré la pleine largeur */
.modal.full>*:not(.close):not(.wz-nav-top){max-width:1100px;margin-inline:auto}
/* la barre sticky reste pleine largeur (débordement conservé), boutons alignés sur la colonne */
.modal.full .wz-nav-top{padding-inline:max(var(--s6),calc((100vw - 1100px)/2))}
.modal h3{font-size:1.2rem;font-weight:650;letter-spacing:-.01em;margin-bottom:6px;padding-right:36px;
  display:flex;align-items:center;gap:9px}
.modal p.sub{color:var(--muted);font-size:.9rem;margin-bottom:var(--s5);line-height:1.5}
.modal .close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:var(--r-full);z-index:20;
  background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background var(--t)}
.modal .close:hover{background:var(--line)}
.modal .row{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s5);flex-wrap:wrap}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* formulaires */
.field{margin-bottom:var(--s4)}
.flabel{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.modal input[type=text],.modal input[type=password],.modal input[type=email],.modal input[type=number],.modal textarea,.modal select,.fd-select{
  width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);font-size:.95rem;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.modal input:focus,.modal textarea:focus,.modal select:focus,.fd-select:focus{
  outline:none;background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,107,58,.1)}
.modal textarea{min-height:104px;resize:vertical;line-height:1.55}
.emoji-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.emoji-row button{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  font-size:1.15rem;transition:all var(--t)}
.emoji-row button:hover{background:var(--surface-2);transform:translateY(-2px)}
.emoji-row button.on{border-color:var(--brand);background:var(--brand-soft)}
.checks{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r);
  padding:8px;background:var(--surface-2);max-height:220px;overflow-y:auto}
.chk{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:var(--r-sm);font-size:.9rem;cursor:pointer}
.chk:hover{background:var(--surface)}
.chk input{width:17px;height:17px;accent-color:var(--brand);flex-shrink:0}
/* boutons dans les modales (compat) */
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.sm{height:34px;padding:0 14px;font-size:.85rem}

/* liens ressources */
.zoom img{max-width:100%;max-height:70vh;margin-inline:auto;border-radius:var(--r)}

/* Contrôles d'édition du catalogue (modifier / supprimer / ajouter) réservés à
   l'admin : masqués côté client, qui ne fait que composer. */
body.client .mini.del,
body.client .add-tag,
body.client .admin-only,
body.client .card-tools{display:none !important}

/* ---------- 10. Configurateur ---------- */
.wz-steps{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:700}
/* En-tête du configurateur : « Étape X/Y » et le titre sur la même ligne, compact */
.modal.xl{padding-top:var(--s4)}
.wz-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.wz-head .wz-steps{flex-shrink:0}
.modal.xl h3{margin-bottom:2px;line-height:1.2}
.wz-head h3{margin-bottom:0}
.wz-choices{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) 0}
.wz-choice{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-lg);transition:all var(--t)}
.wz-choice:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateX(2px)}
.wz-choice b{font-size:.98rem;font-weight:600;display:block}
.wz-choice small{display:block;color:var(--muted);font-size:.82rem}
.wc-ic{font-size:1.5rem;width:38px;text-align:center;flex-shrink:0}
.wz-choice.ghosty{opacity:.75}
.wz-current{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r);
  padding:10px 14px;font-size:.9rem;margin-bottom:var(--s3)}
.wz-pick-list{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto;padding-right:2px}
/* Pages catalogue (phrases, mots) : catégories à gauche, contenu à droite. */
.cat-layout{display:flex;gap:18px;align-items:flex-start}
.cat-side{flex:0 0 210px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;padding-right:10px;border-right:1px solid var(--line)}
.cat-main{flex:1;min-width:0}
.cat-side-b{display:flex;align-items:center;gap:6px;text-align:left;width:100%;padding:8px 10px;
  border:none;border-radius:var(--r);background:transparent;font-size:.86rem;cursor:pointer;
  transition:all var(--t);color:inherit}
.cat-side-b:hover{background:var(--surface-2)}
.cat-side-b.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.cat-side-b .n{margin-left:auto;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cat-side-b.on .n{color:inherit}
.cat-side-grp{padding:10px 10px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
@media(max-width:820px){
  .cat-layout{flex-direction:column}
  .cat-side{flex:none;width:100%;position:static;max-height:none;flex-direction:row;flex-wrap:wrap;
    border-right:none;border-bottom:1px solid var(--line);padding:0 0 10px;margin-bottom:12px}
  .cat-side-b{width:auto;border:1px solid var(--line)}
  .cat-side-grp{display:none}
}
.wz-cat-grp{padding:9px 10px 3px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
.wz-cat-btn.indent{padding-left:24px;font-size:.82rem}
.perso-card{display:flex;flex-direction:column}
.perso-sub{display:none;flex-direction:column;gap:4px;margin-top:6px;padding:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.perso-sub.open{display:flex}
.perso-sub-b{text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-size:.88rem;cursor:pointer;transition:all var(--t)}
.perso-sub-b:hover{background:var(--brand-soft);border-color:var(--brand)}
.perso-sub-b.compose{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.perso-sub-b.compose:hover{filter:brightness(1.08)}
.wz-cat-sidebar{display:flex;flex-direction:column;gap:2px}
.wz-cat-btn{text-align:left;padding:8px 12px;border:none;border-radius:var(--r);background:transparent;
  font-size:.86rem;cursor:pointer;transition:all var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-cat-btn:hover{background:var(--surface-2)}
.wz-cat-btn.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
@media(max-width:700px){.wz-cat-sidebar{width:130px!important}}
.wz-pick{text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  font-size:.92rem;transition:all var(--t)}
.wz-pick:hover{background:var(--brand-soft);border-color:var(--brand)}
.wz-pick small{color:var(--muted);font-size:.78rem;margin-left:6px}
.wz-nav{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);flex-wrap:wrap}
/* onglets de faces : passer de l'une à l'autre à tout moment */
.wz-faces{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex:1 1 auto;min-width:0}
.wz-facetab{height:32px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-size:.8rem;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:all var(--t)}
.wz-facetab:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink-2)}
.wz-facetab.done{color:var(--brand);border-color:var(--brand-soft);background:var(--brand-soft)}
.wz-facetab.on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 0 0 3px rgba(79,107,58,.14)}

/* barre d'en-tête unifiée (vue d'une face) : Retour + étape/titre + onglets + Valider sur une seule ligne */
.wz-topbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.wz-topbar-title{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1 1 200px}
.wz-topbar-title .wz-steps{flex-shrink:0}
.wz-topbar-title h3{display:block;margin:0;padding-right:0;font-size:1.05rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-topbar .wz-faces{flex:0 0 auto;justify-content:flex-end}
.wz-topbar>:last-child{margin-right:42px}   /* réserve la place de la croix ✕ */

/* barre d'action en tête d'étape : reste visible pendant le défilement */
.wz-nav-top{position:sticky;top:0;z-index:8;border-top:0;border-bottom:1px solid var(--line);
  background:var(--surface);box-shadow:0 6px 12px -10px rgba(23,21,15,.5);
  /* déborde sur les marges du modal pour masquer le contenu qui défile dessous */
  margin:0 calc(var(--s6) * -1) var(--s3);padding:var(--s2) var(--s6)}
.wz-recap{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);background:var(--surface-2);margin-bottom:var(--s4)}
.wr-prod{font-size:1.08rem;font-weight:640;margin-bottom:var(--s2)}
.wr-face{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;padding:7px 0;border-top:1px solid var(--line)}
.wr-edit{margin-left:auto;color:var(--brand);font-size:.82rem;text-decoration:underline}
.wz-qtyrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s4) 0}
.wz-img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:var(--s2);
  max-height:32vh;overflow-y:auto;margin-bottom:var(--s3)}
.wz-img{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  display:flex;align-items:center;justify-content:center;padding:5px;overflow:hidden;transition:all var(--t)}
.wz-img:hover{border-color:var(--brand);transform:translateY(-2px)}
.wz-img img{max-width:100%;max-height:100%;object-fit:contain}

/* aperçu produit (disques bois) */
.kc-preview{margin-bottom:var(--s4)}
.kc-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;text-align:center;margin-bottom:var(--s3)}
.kc-discs{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}
.kc-face{display:flex;flex-direction:column;align-items:center;gap:6px}
.kc-disc{position:relative;width:128px;height:128px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 42% 36%,#f2e5cb,#e6d2aa 68%,#d8bd90);
  border:2px solid #c0a074;box-shadow:var(--sh-2),inset 0 0 22px rgba(122,74,33,.14);
  display:flex;align-items:center;justify-content:center}
.kc-cur .kc-disc{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,107,58,.16),var(--sh-2)}
.kc-hole{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;
  background:#3a2a19;box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.kc-content{padding:24px 12px 12px;text-align:center;line-height:1.2;max-width:100%}
.kc-text{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.05rem;color:#5a3a1a;word-break:break-word}
.kc-motif{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:.9rem;color:#6b4a24}
.kc-img{max-width:78px;max-height:78px;object-fit:contain;filter:sepia(.5) saturate(.7) brightness(.94) contrast(1.08);mix-blend-mode:multiply}
.kc-empty{color:#b3a084;font-style:italic;font-size:.86rem}
.kc-label{font-size:.72rem;color:var(--muted);font-weight:600}

/* choix de la police de gravure + compteur de caractères */
/* colonne des polices, à la verticale contre l'aperçu */
.wz-stage{display:flex;gap:var(--s4);align-items:flex-start;justify-content:center}
.wz-stage .pv-row{flex:1 1 auto;min-width:0;align-items:center}
.wz-fonts{display:flex;flex-direction:column;gap:6px;align-items:center;flex:0 0 auto;
  max-height:420px;overflow-y:auto;padding:2px}
.wz-fonts .wz-font-lab{width:auto;margin-bottom:2px}
/* colonne « Taille » verticale, posée à gauche de l'aperçu comme les polices */
.wz-vsize{display:flex;flex-direction:column;gap:6px;align-items:center;flex:0 0 auto;padding:2px}
.wz-vsize .wz-font-lab{width:auto;margin-bottom:2px}
.wz-font{width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-size:.85rem;line-height:1;color:var(--ink-2);cursor:pointer;transition:all var(--t)}
.wz-font:hover{border-color:var(--line-strong);background:var(--surface-2)}
.wz-font.on{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px rgba(79,107,58,.14)}
.wz-font-lab{font-size:.72rem;color:var(--muted);font-weight:600;width:100%;text-align:center}
.wz-count{text-align:right;font-size:.76rem;color:var(--muted);margin:-8px 0 12px}

/* choix de la forme du produit */
.wz-shapes{display:flex;gap:10px;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.wz-shape{display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;padding:8px 4px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:all var(--t)}
.wz-shape:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)}
.wz-shape.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,107,58,.14)}
.wz-shape span{font-size:.68rem;font-weight:600;color:var(--ink-2);line-height:1.2;text-align:center;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wz-shape .pv{filter:none}
.wz-shape-lab{font-size:.72rem;color:var(--muted);font-weight:600;width:100%;text-align:center;margin-top:2px}
/* sens de la gravure */
.wz-dirs{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:var(--s3)}
.wz-dir{height:34px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-size:.8rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all var(--t)}
.wz-dir:hover{border-color:var(--line-strong);background:var(--surface-2)}
.wz-dir.on{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px rgba(79,107,58,.14)}
.wr-shape{display:inline-block;font-size:.72rem;font-weight:600;color:var(--brand);
  background:var(--surface-2);border-radius:var(--r-full);padding:2px 9px;vertical-align:middle}

/* ---------- 11. Panier & commandes ---------- */
.cart-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);margin-bottom:var(--s2);flex-wrap:wrap}
.ci-main{flex:1;min-width:180px}
.ci-label{font-weight:600;font-size:.98rem}
.ci-sub{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.ci-faces{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.ci-face{font-size:.85rem;color:var(--ink-2)}
.face-n{display:inline-block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  background:var(--surface-2);color:var(--muted);border-radius:var(--r-full);padding:2px 8px;margin-right:6px}
.face-empty{color:var(--muted);font-style:italic}
.face-thumb{width:24px;height:24px;object-fit:contain;vertical-align:middle;border:1px solid var(--line);
  border-radius:6px;background:var(--surface);padding:1px;margin-right:3px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.qty button{width:34px;height:34px;font-size:1rem;color:var(--ink-2);transition:background var(--t)}
.qty button:hover{background:var(--surface-2)}
.qty .q{min-width:34px;text-align:center;font-weight:650;font-size:.92rem}
.ci-del{width:34px;height:34px;border-radius:var(--r-full);color:var(--danger);transition:background var(--t)}
.ci-del:hover{background:var(--danger-soft)}
.ci-tools{display:flex;flex-direction:column;gap:4px}
.ci-edit{width:34px;height:34px;border-radius:var(--r-full);color:var(--brand);transition:background var(--t)}
.ci-edit:hover{background:var(--brand-soft)}
.cart-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.cart-total{font-size:1.02rem;font-weight:650}
.cart-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.cart-empty{text-align:center;padding:var(--s6) var(--s4);color:var(--muted)}
.order-items li{display:flex;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:.9rem}
.order-tools button{height:32px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-size:.82rem}
.order-tools .del{color:var(--danger);border-color:var(--danger-soft)}

/* ---------- 12. Toast & pied ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);z-index:120;
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-full);font-size:.92rem;font-weight:500;
  box-shadow:var(--sh-3);opacity:0;transition:all .28s cubic-bezier(.2,.9,.3,1.1);pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
footer{text-align:center;padding:var(--s6) var(--s5);color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);background:var(--surface)}
footer a{color:var(--brand-dark);font-weight:500}

/* portail admin (legacy) */

/* ---------- 13. Responsive ---------- */
@media(max-width:900px){
  .nav-inner{padding:10px var(--s4);gap:var(--s2)}
  .brand .logo-img{height:36px}
  .tabs{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);padding:var(--s2);display:none}
  body.menu-open .tabs{display:flex;animation:pop .16s var(--t)}
  .tabs>button,.tabs>a{height:46px;justify-content:flex-start;border-radius:var(--r)}
  .burger{display:inline-flex}
  #composeBtn{display:none}
  .search,.catbar,.subbar-inner{padding-inline:var(--s4)}
  main{padding:var(--s5) var(--s4) var(--s8)}
  .wrap{display:block}
  .hero{padding:var(--s6) 0 var(--s5)}
  .stats{gap:var(--s5)}
  .modal{padding:var(--s5);border-radius:var(--r-lg)}
  .wz-nav-top{margin-inline:calc(var(--s5) * -1);padding-inline:var(--s5)}
  .prod-grid,.wz-prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
  .ex-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .illus-grid{grid-template-columns:1fr}
  .cat-dd-btn{min-width:0;width:100%}
}
@media(max-width:520px){
  body{font-size:14.5px}
  .cart-item{gap:var(--s2)}
  .kc-disc{width:112px;height:112px}
  .kc-discs{gap:var(--s3)}
  .wz-nav .btn{flex:1}
  /* sur téléphone, les onglets de faces prennent leur propre ligne */
  .wz-faces{order:3;flex:1 0 100%;margin-top:8px}
  .wz-facetab{flex:1 1 auto;height:34px;padding:0 8px}
  #toast{left:var(--s4);right:var(--s4);transform:translateY(80px);max-width:none}
  #toast.show{transform:none}
}

/* face portant une image et un texte */
.wz-combo{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line)}
.wz-combo-lab{font-size:.72rem;color:var(--muted);font-weight:600;width:100%;text-align:center}
/* disposition image / texte choisie par le client */
.wz-arr{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:var(--s2)}
.wz-arr-lab{font-size:.72rem;color:var(--muted);font-weight:600;width:100%;text-align:center}
.wz-arr-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
  font-size:.78rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all var(--t)}
.wz-arr-b:hover{border-color:var(--line-strong);background:var(--surface-2)}
.wz-arr-b.on{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px rgba(79,107,58,.14)}
.wz-arr-ic{font-size:.95rem;line-height:1}
.face-arr{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:var(--r-full);padding:1px 8px;vertical-align:middle}
.face-dir{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:var(--r-full);padding:1px 7px;vertical-align:middle}
.wr-dirface{display:inline-block;font-size:.75rem;font-weight:600;color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-full);padding:1px 8px;margin-right:4px}
.face-size{display:inline-block;font-size:.72rem;font-weight:700;color:var(--wood);
  background:var(--wood-soft);border-radius:var(--r-full);padding:1px 8px;vertical-align:middle}
/* réglage de la taille de gravure */
.wz-sz{width:44px;height:34px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--surface);font-weight:700;color:var(--ink-2);cursor:pointer;transition:all var(--t)}
.wz-sz:hover:not([disabled]){border-color:var(--brand);color:var(--brand);background:var(--surface-2)}
.wz-sz[disabled]{opacity:.35;cursor:default}
.wr-tech{display:inline-block;font-size:.72rem;font-weight:600;color:var(--wood);
  background:var(--wood-soft);border-radius:var(--r-full);padding:2px 9px;vertical-align:middle}

/* ---------- Configurateur en grand format : aperçu / choix ---------- */
.wz-cols{display:grid;grid-template-columns:minmax(300px,1fr) minmax(260px,380px);gap:var(--s6);align-items:start}
.wz-col-a{position:sticky;top:84px}
.wz-col-a .kc-preview{margin-bottom:0}
.wz-col-b{min-width:0}
.wz-col-b .sub{margin-bottom:var(--s3)}
/* dans la colonne, les vignettes de faces peuvent respirer */
.wz-col-a .pv-row{gap:22px}
@media(max-width:900px){
  .wz-cols{grid-template-columns:1fr;gap:var(--s4)}
  .wz-col-a{position:static}
}
@media(max-width:520px){
  .modal.xl{width:96vw;max-width:96vw;max-height:94vh}
}

/* sur écran étroit, la colonne des polices repasse à l'horizontale */
@media(max-width:900px){
  .wz-stage{flex-direction:column;align-items:center;gap:var(--s3)}
  .wz-fonts{flex-direction:row;flex-wrap:wrap;justify-content:center;max-height:none;overflow:visible}
  .wz-fonts .wz-font-lab{width:100%}
  .wz-vsize{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .wz-vsize .wz-font-lab{width:100%}
}

/* Sur téléphone : le bandeau d'en-tête défile avec le contenu (plus collé en haut) ;
   seule la croix ✕ reste fixe dans le coin, toujours accessible. */
@media(max-width:640px){
  .wz-topbar.wz-nav-top{position:static;box-shadow:none}
  .modal.full .close{position:fixed;top:12px;right:12px}
}

/* aperçu de face cliquable : sélectionne la face directement */
.pv-pick{cursor:pointer;border-radius:var(--r-lg);padding:6px;transition:background var(--t),transform var(--t)}
.pv-pick:hover{background:var(--surface-2);transform:translateY(-2px)}
.pv-pick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pv-pick.on{background:var(--brand-soft)}

/* ---------- Visionneuse plein écran d'une face ---------- */
.fs-view{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s4);padding:var(--s5);
  background:rgba(23,21,15,.88);backdrop-filter:blur(6px);animation:fade .18s ease}
.fs-body{display:flex;align-items:center;justify-content:center;gap:var(--s4);max-width:100%}
.fs-stage{display:flex;align-items:center;justify-content:center;min-width:0}
.fs-stage .pv-row{gap:0}
.fs-arrow{flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  color:#fff;font-size:2rem;line-height:1;padding-bottom:5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.fs-arrow:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.fs-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;
  font-size:1.1rem;cursor:pointer;transition:all var(--t)}
.fs-close:hover{background:rgba(255,255,255,.22)}
.fs-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center;
  color:#fff;font-size:.86rem;font-weight:600}
.fs-foot .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.fs-foot .btn:hover{background:rgba(255,255,255,.22)}
/* la vignette du récapitulatif invite au clic */
.pv-loupe{cursor:zoom-in}
@media(max-width:520px){
  .fs-view{padding:var(--s3)}
  .fs-arrow{width:42px;height:42px;font-size:1.6rem}
}

/* ---------- Diaporama plein écran des créations ---------- */
.sw-view{position:fixed;inset:0;z-index:210;background:rgba(18,16,12,.95);
  display:flex;align-items:center;justify-content:center;animation:fade .18s ease;
  touch-action:none;overscroll-behavior:contain}
.sw-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sw-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;user-select:none;
  -webkit-user-drag:none;touch-action:none;will-change:transform;transition:transform .12s ease;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.sw-view.zoomed .sw-img{transition:none}
.sw-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:54px;height:54px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.4);color:#fff;font-size:2rem;line-height:1;padding-bottom:5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.sw-arrow:hover{background:rgba(0,0,0,.65);transform:translateY(-50%) scale(1.06)}
.sw-prev{left:16px} .sw-next{right:16px}
.sw-close{position:absolute;top:16px;right:16px;z-index:4;width:44px;height:44px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);color:#fff;font-size:1.15rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.sw-close:hover{background:rgba(0,0,0,.7)}
.sw-zoom{position:absolute;top:16px;left:16px;z-index:4;display:flex;gap:6px}
.sw-zoom button{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.4);color:#fff;font-size:1.15rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.sw-zoom button:hover{background:rgba(0,0,0,.7)}
.sw-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:16px 20px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff}
.sw-info{display:flex;gap:12px;align-items:baseline;min-width:0;font-size:.9rem}
.sw-cap{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.sw-count{opacity:.8;white-space:nowrap}
.sw-foot .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
.sw-foot .btn:hover{background:rgba(255,255,255,.26)}
@media(max-width:640px){
  .sw-img{max-width:98vw;max-height:82vh}
  .sw-arrow{width:44px;height:44px;font-size:1.6rem}
  .sw-zoom button{width:38px;height:38px}
  .sw-cap{max-width:52vw}
}

/* =========================================================================
   MODE APPLICATION (mobile / tablette) — activé par <html class="app">
   Tout est scopé sous html.app : la version ordinateur reste inchangée.
   ========================================================================= */
html.app{ -webkit-tap-highlight-color:transparent }
html.app body{
  overscroll-behavior-y:contain;                  /* pas de "rubber band" façon page web */
  padding-bottom:calc(64px + env(safe-area-inset-bottom));   /* place pour la barre d'onglets */
}
/* ---- chrome de bureau masqué : la navigation passe en bas ---- */
html.app .tabs,
html.app #burger,
html.app #composeBtn,
html.app #cartBtn{ display:none !important }
/* ---- barre du haut : app bar compacte et collante ---- */
html.app .nav{ padding-top:env(safe-area-inset-top) }
html.app .nav-inner{ padding:8px var(--s4); gap:var(--s2); justify-content:center }
html.app .brand .logo-img{ height:36px }

/* ---- contenu : marges pensées pour les petits écrans ---- */
html.app main{ padding:var(--s4) var(--s4) var(--s6) }
html.app .subbar,
html.app .catbar,
html.app .searchbar{ padding-inline:var(--s4) }
html.app .hero{ padding:var(--s5) 0 var(--s4) }
html.app .hero h1{ font-size:clamp(1.6rem,7vw,2.1rem) }
html.app .section-title{ font-size:1.15rem }

/* ---- cibles tactiles : jamais moins de 44 px ---- */
html.app .btn{ min-height:46px; padding-inline:20px }
html.app .btn-sm{ min-height:40px }
html.app .icon-btn{ width:46px;height:46px }
html.app .chip,
html.app .sm-prod,
html.app .prod-menu-btn,
html.app .cat-dd-btn{ min-height:42px }
html.app .tag,
html.app .motif,
html.app .wz-pick,
html.app .wz-choice{ min-height:46px }
/* retour tactile immédiat : l'élément « s'enfonce » sous le doigt */
html.app .btn:active,
html.app .tag:active,
html.app .motif:active,
html.app .wz-choice:active,
html.app .wz-pick:active,
html.app .prod-card:active,
html.app .wz-prod:active,
html.app .ex-card:active,
html.app .imgbox img:active{ transform:scale(.97) }

/* ---- barres horizontales : défilement fluide avec accroche ---- */
html.app .subbar,
html.app .kw-groups{
  flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
html.app .subbar::-webkit-scrollbar,
html.app .kw-groups::-webkit-scrollbar{ display:none }
html.app .subbar>*,
html.app .kw-groups>*{ scroll-snap-align:start;flex:0 0 auto }

/* ---- transition entre écrans : glissé-fondu, façon application ---- */
html.app #main.page-in{ animation:pageIn .26s cubic-bezier(.2,.7,.3,1) both }
@keyframes pageIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* =========================== BARRE D'ONGLETS ============================ */
.tabbar{ display:none }
html.app .tabbar{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px -18px rgba(23,21,15,.6);
}
.tabbar-item{
  flex:1 1 0;min-width:0;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px;border-radius:var(--r);color:var(--muted);
  font-size:.68rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  transition:color var(--t),background var(--t);
}
.tabbar-item svg{
  width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t);
}
.tabbar-item span:last-child{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tabbar-item:active{ background:var(--surface-2) }
.tabbar-item:active svg{ transform:scale(.9) }
.tabbar-item.on{ color:var(--brand-dark) }
.tabbar-item.on svg{ stroke-width:2.1;animation:tabPop .32s cubic-bezier(.2,.9,.3,1.2) }
@keyframes tabPop{ 0%{transform:scale(.86)} 55%{transform:scale(1.14)} 100%{transform:scale(1)} }
/* pastille active discrète sous l'icône */
html.app .tabbar-item.on::before{
  content:"";position:absolute;top:2px;width:22px;height:3px;border-radius:var(--r-full);
  background:var(--brand);
}
html.app .tabbar-item{ position:relative }
/* compteur du panier */
.tabbar-ico{ position:relative;display:inline-flex }
.tabbar-badge{
  position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-full);background:var(--danger);color:#fff;
  font-size:.62rem;font-weight:700;display:none;align-items:center;justify-content:center;
}
.tabbar-badge.on{ display:inline-flex;animation:tabPop .3s cubic-bezier(.2,.9,.3,1.2) }

/* ===================== FENÊTRES EN FEUILLE (bottom sheet) ================= */
/* Sur mobile, une fenêtre modale monte du bas comme dans une application. */
html.app .overlay{ align-items:flex-end;padding:0 }
html.app .modal:not(.full){
  width:100%;max-width:100%;max-height:92dvh;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  animation:sheetUp .3s cubic-bezier(.2,.8,.25,1);
}
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:none} }
/* poignée de préhension, comme sur les feuilles natives */
html.app .modal:not(.full)::before{
  content:"";position:sticky;top:-6px;display:block;
  width:42px;height:4px;margin:-8px auto 12px;border-radius:var(--r-full);
  background:var(--line-strong);
}
html.app .modal .row{ flex-direction:column-reverse;gap:var(--s2) }
html.app .modal .row .btn{ width:100% }
/* le configurateur reste en plein écran */
html.app .modal.full{
  height:100dvh;max-height:100dvh;border-radius:0;
  padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  animation:none;
}
html.app .overlay.full{ align-items:stretch }

/* ---- configurateur : une colonne, aperçu d'abord ---- */
html.app .wz-cols{ grid-template-columns:1fr;gap:var(--s4) }
html.app .wz-choice{ padding:14px }
html.app .wz-nav .btn{ flex:1 }
html.app .wz-pick-list{ max-height:none }

/* ---- diaporama : commandes plus grosses, hors des zones du pouce ---- */
html.app .sw-close,
html.app .sw-zoom button{ width:46px;height:46px }
html.app .sw-arrow{ width:48px;height:48px }
html.app .sw-foot{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)) }

/* ---- grilles : cartes plus généreuses au doigt ---- */
html.app .prod-grid,
html.app .wz-prod-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3) }
html.app .ex-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3) }
html.app .illus-grid{ grid-template-columns:1fr }

/* ---- téléphones étroits ---- */
@media(max-width:420px){
  html.app .tabbar-item{ font-size:.63rem }
  html.app .tabbar-item svg{ width:22px;height:22px }
  html.app main{ padding-inline:var(--s3) }
  html.app .prod-grid,
  html.app .wz-prod-grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) }
}
/* ---- tablette : on garde deux colonnes dans le configurateur ---- */
@media(min-width:760px){
  html.app .wz-cols{ grid-template-columns:1fr minmax(260px,340px) }
  html.app .illus-grid{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) }
  html.app .modal:not(.full){ max-width:620px;margin-inline:auto;border-radius:var(--r-xl) }
  html.app .overlay{ align-items:center;padding:var(--s4) }
  html.app .modal:not(.full)::before{ display:none }
}

/* ---- une fenêtre recouvre l'écran : la barre d'onglets s'escamote ---- */
html.app .tabbar{
  transform:translateY(0);
  transition:transform .24s cubic-bezier(.3,.7,.3,1);
}
html.app body.layer-open .tabbar{ transform:translateY(115%);pointer-events:none }
html.app body.layer-open{ padding-bottom:0 }

/* ---- configurateur : en-tête compact et lisible sur un petit écran ---- */
@media(max-width:759px){
  html.app .wz-topbar{ gap:var(--s2) }
  html.app .wz-topbar-title{ order:-1;flex:1 1 100%;padding-right:46px }   /* titre en 1re ligne, place pour le ✕ */
  html.app .wz-topbar-title h3{ font-size:1rem;white-space:normal }
  html.app .wz-topbar>.btn{ min-height:40px;padding-inline:14px;font-size:.86rem }
  html.app .wz-topbar>:last-child{ margin-right:0 }
  html.app .wz-faces{ justify-content:flex-start }
  html.app .wz-facetab{ height:36px }
  /* choix de contenu : vraie ligne de liste (icône | titre / description) */
  html.app .wz-choice{
    display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 14px;
  }
  html.app .wz-choice .wc-ic{ grid-row:span 2;align-self:center }
  html.app .wz-choice b{ align-self:end;line-height:1.25 }
  html.app .wz-choice small{ align-self:start;line-height:1.3 }
  /* accueil : typographie resserrée, on voit plus de contenu d'un coup */
  html.app .hero p{ font-size:.97rem }
  html.app .hero .lead{ font-size:1rem }
  html.app .stats{ gap:var(--s4) }
}

/* écrans de choix (phrase, mot, image…) : Retour et titre sur une seule ligne */
@media(max-width:759px){
  html.app .wz-topbar .wz-head{
    flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0;
    margin-bottom:0;padding-right:44px;
  }
  html.app .wz-topbar .wz-head .wz-steps{ font-size:.62rem }
  html.app .wz-topbar .wz-head h3{
    font-size:.98rem;line-height:1.25;margin:0;
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* ---- Découpe seule : choix du modèle de découpe (cartes) ---- */
.wz-cutgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s3);margin:var(--s3) 0}
.wz-cut{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.wz-cut:hover{border-color:var(--brand);box-shadow:var(--sh-2);transform:translateY(-2px)}
.wz-cut.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(79,107,58,.14)}
.wz-cut-img{display:flex;align-items:center;justify-content:center;min-height:96px}
.wz-cut-name{font-size:.88rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.25}
.wz-cut-dim{font-size:.74rem;color:var(--muted)}
.face-cut{font-weight:600;color:var(--brand-dark)}

/* ---- Démarrage : on n'affiche pas un décor vide avant les données ---- */
html.booting .searchbar,
html.booting .catbar,
html.booting .subbar,
html.booting footer{ display:none !important }
.boot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  min-height:58vh;color:var(--muted);font-size:.9rem;
}
.boot-spin{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--brand);
  animation:bootSpin .7s linear infinite;
}
@keyframes bootSpin{ to{ transform:rotate(360deg) } }
@media(prefers-reduced-motion:reduce){ .boot-spin{ animation:none } }