/* =============================================================================
   Pokadonys — système visuel
   Repris du POC validé par le client (pokadonys-site-b2b_2.html) et étendu aux
   écrans que le POC ne couvrait pas : panier, tunnel de commande, compte, admin.

   Principe : pas d'aplat, pas d'ombre. Tout est construit sur des filets
   (--rule) et une grille. Le rouge shu est un accent, jamais un fond large.
   Bootstrap est chargé avant ce fichier ; les surcharges de ses composants
   sont regroupées en fin de feuille.
   ============================================================================= */

:root{
  /* Papier */
  --washi:#EFE9DC;          /* fond général */
  --washi-2:#F7F3EA;        /* surfaces surélevées : cartes, champs */
  --washi-3:#E5DDCB;        /* visuels produit, zones creuses */

  /* Encre */
  --sumi:#171512;           /* texte principal */
  --sumi-2:#5C564C;         /* texte secondaire */
  --faint:#8C8577;          /* mentions, légendes */

  /* Filets */
  --rule:#D8CFBD;
  --rule-soft:#E3DBCA;

  /* Accents */
  --shu:#A8322A;            /* vermillon sourd — accent unique */
  --shu-dark:#8E2822;
  --shu-text:#7C2721;
  --shu-soft:#F6E9E5;
  --matsu:#3F6B2E;          /* stock disponible */
  --kohaku:#9A6410;         /* stock faible */

  --f-display:'Shippori Mincho B1',serif;
  --f-body:'Zen Kaku Gothic New',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;

  --gut:clamp(20px,5vw,64px);
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--washi);color:var(--sumi);
  font-family:var(--f-body);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--shu);color:var(--washi-2)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--shu)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

h1,h2,h3,h4,.pk-display{font-family:var(--f-display);font-weight:600;line-height:1.22}
h1{font-size:clamp(33px,5.2vw,58px);letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:22px}

.pk-mono,.mono{font-family:var(--f-mono);letter-spacing:.06em}
.pk-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.pk-eyebrow{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--shu);
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:920px;margin:0 auto;padding:0 var(--gut)}
.pk-hairline{border:0;border-top:1px solid var(--rule);margin:clamp(28px,4vw,48px) 0}

/* ── Sceau : le motif signature du POC ─────────────────────────────────────
   Carré à filet rouge, légèrement pivoté, portant un kanji. */
.seal{
  width:52px;height:52px;flex:0 0 52px;border:2px solid var(--shu);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--shu);
  transform:rotate(-6deg);
}
.seal.sm{width:34px;height:34px;flex-basis:34px;font-size:15px;border-width:1.5px;border-radius:4px}

/* Bandeau vertical « importé direct du Japon », masqué sous 1180px. */
.rail{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:40;
  writing-mode:vertical-rl;font-family:var(--f-display);font-size:12px;
  letter-spacing:.45em;color:var(--faint);pointer-events:none;
}
.rail span{display:block;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-size:13px;font-weight:400;padding:10px 18px;
  border-radius:3px;border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-solid{background:var(--shu);border-color:var(--shu);color:#FFF7F4}
.btn-solid:hover,.btn-solid:focus{background:var(--shu-dark);border-color:var(--shu-dark);color:#FFF7F4}
.btn-ink{background:var(--sumi);border-color:var(--sumi);color:var(--washi-2)}
.btn-ink:hover{background:#2C2823;color:var(--washi-2)}
.btn-line,.btn-outline-ink{background:transparent;border-color:var(--rule);color:var(--sumi)}
.btn-line:hover,.btn-outline-ink:hover{border-color:var(--sumi);background:var(--washi-2);color:var(--sumi)}
.btn-lg{padding:14px 26px;font-size:14px}
.btn-sm{padding:7px 13px;font-size:12.5px}
.btn:disabled,.btn.disabled{opacity:.45;pointer-events:none}

/* ── Barre de navigation ─────────────────────────────────────────────────── */

.pk-header{
  position:sticky;top:0;z-index:1030;
  background:rgba(239,233,220,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.pk-nav-in{
  max-width:1240px;margin:0 auto;padding:8px var(--gut);min-height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px}
/* Le lettrage est large et court (ratio ~2,2) : on le cale sur la largeur.
   Pas de règle sur .brand img : elle prendrait le pas sur .brand-logo. */
.brand-logo{width:126px;height:auto;display:block}
.brand-name{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:.16em}
.pk-nav-links{display:flex;align-items:center;gap:24px}
.pk-nav-links a{font-size:13px;color:var(--sumi-2);transition:color .2s}
.pk-nav-links a:hover,.pk-nav-links a.active{color:var(--shu)}
.pk-nav-act{display:flex;align-items:center;gap:10px}
.pk-cart-count{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.nav-toggle{
  display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--rule);border-radius:3px;background:none;
}

/* ── Fiche encadrée (« record ») : état du stock, récapitulatifs ─────────── */

.record{background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius)}
.record-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid var(--rule);
}
.record-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0}
.record-ref{font-family:var(--f-display);font-size:19px;font-weight:600;margin:5px 0 0;line-height:1.3}
.record-body{padding:6px 20px 18px;margin:0}
.record-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.record-row:last-child{border-bottom:0}
.record-row dt{color:var(--faint);font-size:12px;margin:0}
.record-row dd{font-family:var(--f-mono);font-size:12px;text-align:right;margin:0}
.record-foot{
  padding:14px 20px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:12px;
  background:var(--shu-soft);border-radius:0 0 3px 3px;
}
.record-foot p{font-size:12px;color:var(--shu-text);line-height:1.5;margin:0}

/* Surface générique — remplace l'ancien .pk-panel */
.pk-panel{background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px}
.pk-panel--flush{padding:0}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero{padding:clamp(52px,8vw,104px) 0 clamp(46px,7vw,80px);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(32px,6vw,80px);align-items:start}
.hero h1{margin:16px 0 20px;max-width:15ch}
.hero-lede{font-size:clamp(15px,1.4vw,17px);color:var(--sumi-2);max-width:47ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:24px;font-size:12px;color:var(--faint)}

/* Bandeau de chiffres */
.strip{border-bottom:1px solid var(--rule)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-cell{padding:26px clamp(16px,3vw,36px) 26px 0;border-right:1px solid var(--rule)}
.strip-cell:last-child{border-right:0}
.strip-cell:not(:first-child){padding-left:clamp(16px,3vw,36px)}
.strip-num{font-family:var(--f-display);font-size:clamp(24px,2.8vw,32px);font-weight:600;line-height:1.1;margin:0}
.strip-lab{font-size:12px;color:var(--faint);margin:4px 0 0;line-height:1.55}

/* ── Sections ────────────────────────────────────────────────────────────── */

.sec{padding:clamp(52px,8vw,94px) 0;border-bottom:1px solid var(--rule)}
.sec-sm{padding:clamp(30px,4vw,48px) 0}
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4vw,48px)}
.sec-head h2{margin:14px 0}
.sec-head p{color:var(--sumi-2);margin:0}

.chain{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:clamp(34px,5vw,56px)}
.chain-step{padding:26px clamp(16px,2.4vw,30px) 26px 0;border-right:1px solid var(--rule)}
.chain-step:last-child{border-right:0}
.chain-step:not(:first-child){padding-left:clamp(16px,2.4vw,30px)}
.chain-idx{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--shu)}
.chain-step h3{font-size:18px;margin:10px 0 8px}
.chain-step p{font-size:13.5px;color:var(--sumi-2);line-height:1.7;margin:0}

/* ── Filtres catalogue ───────────────────────────────────────────────────── */

.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-bottom:22px}
.tab{
  padding:13px 20px 12px;font-size:13.5px;color:var(--sumi-2);background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:8px;
  transition:color .18s,border-color .18s;
}
.tab:hover{color:var(--sumi)}
.tab.is-active{color:var(--shu);border-bottom-color:var(--shu)}
.tab em{font-family:var(--f-mono);font-style:normal;font-size:10.5px;color:var(--faint)}
.tab.is-active em{color:var(--shu)}

.cat-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12.5px;padding:7px 15px;border:1px solid var(--rule);border-radius:999px;
  color:var(--sumi-2);background:none;transition:all .18s;
}
.chip:hover{border-color:var(--sumi-2)}
.chip.is-on{background:var(--sumi);border-color:var(--sumi);color:var(--washi-2)}
.cat-count{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--faint);margin:0}

/* ── Carte produit ───────────────────────────────────────────────────────── */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:18px}

.pk-card{
  background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;flex-direction:column;text-align:left;overflow:hidden;height:100%;
  transition:border-color .2s,transform .2s;
}
.pk-card:hover{border-color:var(--sumi-2);transform:translateY(-2px)}
.card-vis{
  height:156px;background:var(--washi-3);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.card-vis img{max-height:132px;max-width:82%;object-fit:contain}
/* Sans photo, le code de série tient lieu de visuel : gros, fantôme, mincho. */
.card-code{
  font-family:var(--f-display);font-size:34px;font-weight:600;
  color:rgba(23,21,18,.17);letter-spacing:.04em;
}
.tag{
  position:absolute;top:10px;left:10px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;padding:4px 9px;border-radius:2px;
}
.tag-shrink{background:var(--shu);color:#FFF7F4}
.tag-ns{background:transparent;border:1px solid var(--shu);color:var(--shu)}
.tag-both{background:var(--sumi);color:var(--washi-2)}
.tag-pre{background:var(--kohaku);color:#FFF7F4}
/* Hors carte produit (tableaux, récapitulatifs), l'étiquette se pose dans le flux. */
.tag[style*="static"]{display:inline-block;vertical-align:middle}

.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.card-sku{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);margin:0}
.card-name{font-family:var(--f-display);font-size:16.5px;font-weight:600;line-height:1.35;margin:5px 0 4px}
.card-sub{font-size:12px;color:var(--faint);margin:0 0 12px}
.card-price{font-family:var(--f-display);font-size:22px;font-weight:600;margin:auto 0 0}
.card-price small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--faint);margin-left:5px}
.card-from{font-size:11px;color:var(--faint);display:block;margin-bottom:1px;font-family:var(--f-body);letter-spacing:0}

/* État de stock : pastille + libellé, trois niveaux */
.stock{display:flex;align-items:center;gap:7px;font-size:12px;margin:9px 0 0}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.s-in{color:var(--matsu)} .s-in .dot{background:var(--matsu)}
.s-low{color:var(--kohaku)} .s-low .dot{background:var(--kohaku)}
.s-out{color:var(--faint)} .s-out .dot{background:var(--faint)}
.s-pre{color:var(--shu)} .s-pre .dot{background:var(--shu)}

.empty{padding:52px 0;text-align:center;color:var(--faint);font-size:14px}

/* ── Sélecteur de variante et paliers ────────────────────────────────────── */

/* Boutons côte à côte, jamais une liste déroulante (voir ARCHITECTURE §4.1). */
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:18px 0 8px}
.seg button{
  flex:1 1 140px;padding:11px 12px;font-size:12.5px;text-align:left;background:none;border:0;
  border-right:1px solid var(--rule);transition:background .18s,color .18s;cursor:pointer;
}
.seg button:last-child{border-right:0}
.seg button.is-active{background:var(--sumi);color:var(--washi-2)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.seg-label{display:block;font-size:13px}
.seg-price{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--faint);margin-top:2px}
.seg button.is-active .seg-price{color:rgba(247,243,234,.72)}
.seg-note{font-size:12px;color:var(--faint);line-height:1.6}
/* Variante unique : plus rien à choisir. Le bouton reste dans le DOM — le script
   y lit le SKU, le stock et les prix — mais il n'est pas affiché. */
.seg.is-single{display:none}

.tiers{margin:20px 0;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.tier{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 16px;font-size:13px;border-bottom:1px solid var(--rule-soft);background:var(--washi-2);
}
.tier:last-child{border-bottom:0}
.tier.best{background:var(--shu-soft);color:var(--shu-text)}
.tier b{font-family:var(--f-display);font-size:17px;font-weight:600}

/* Paliers en colonnes, pour le produit mis en avant */
.feat-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:24px 0}
.feat-tier{padding:13px 14px;border-right:1px solid var(--rule);background:var(--washi)}
.feat-tier:last-child{border-right:0}
.feat-tier dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin:0}
.feat-tier dd{font-family:var(--f-display);font-size:19px;font-weight:600;margin:3px 0 0}

.qty{display:flex;align-items:center;gap:12px;margin:20px 0 14px}
.qty-box{display:flex;align-items:center;border:1px solid var(--rule);border-radius:3px;background:var(--washi-2)}
.qty-box button{width:40px;height:44px;font-size:17px;color:var(--sumi-2);background:none;border:0;cursor:pointer}
.qty-box input{width:56px;height:44px;text-align:center;border:0;background:transparent;font-family:var(--f-mono);font-size:14px}
.qty-total{margin-left:auto;text-align:right}
.qty-total span{display:block;font-size:11px;color:var(--faint)}
.qty-total b{font-family:var(--f-display);font-size:22px;font-weight:600}

/* ── Produit mis en avant ────────────────────────────────────────────────── */

.feat{background:var(--washi-2)}
.feat-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.feat-vis{
  aspect-ratio:4/3;background:var(--washi-3);border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.feat-vis .card-code{font-size:clamp(52px,8vw,92px)}
.feat-vis img{max-height:82%;max-width:78%;object-fit:contain}
.feat-vis .seal{position:absolute;top:16px;right:16px}
.feat h2{margin:12px 0 6px}
.feat-jp{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;color:var(--faint);margin:0}
.feat-lede{color:var(--sumi-2);font-size:14.5px;max-width:52ch;margin-top:14px}
.feat-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── Volet latéral (panier, fiche) ───────────────────────────────────────── */

.scrim{position:fixed;inset:0;background:rgba(23,21,18,.42);z-index:1040;opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--washi);
  z-index:1050;border-left:1px solid var(--rule);transform:translateX(100%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);overflow-y:auto;
  display:flex;flex-direction:column;
}
.panel.open{transform:translateX(0)}
.panel--left{right:auto;left:0;border-left:0;border-right:1px solid var(--rule);transform:translateX(-100%);width:min(340px,100%)}
.panel-head{
  position:sticky;top:0;background:var(--washi);border-bottom:1px solid var(--rule);
  padding:18px 26px;display:flex;align-items:center;justify-content:space-between;z-index:2;
}
.panel-head h2{font-size:19px;margin:0}
.panel-close{background:none;border:0;font-size:22px;line-height:1;color:var(--sumi-2);cursor:pointer}
.panel-body{padding:20px 26px;flex:1}
.panel-foot{border-top:1px solid var(--rule);padding:18px 26px;background:var(--washi-2)}

/* Lignes de panier */
.cart-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.cart-line:last-child{border-bottom:0}
.cart-vis{
  width:58px;height:58px;flex:0 0 58px;background:var(--washi-3);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;border-radius:3px;
}
.cart-vis img{max-width:80%;max-height:80%;object-fit:contain}
.cart-vis .card-code{font-size:15px}
.cart-name{font-family:var(--f-display);font-size:15px;font-weight:600;line-height:1.3;margin:2px 0 3px}
.cart-qty{width:62px;height:34px;text-align:center;font-family:var(--f-mono);font-size:13px;background:var(--washi-2);border:1px solid var(--rule);border-radius:3px}
.cart-line-total{font-family:var(--f-display);font-size:16px;font-weight:600;white-space:nowrap}
.cart-next{font-size:11.5px;color:var(--shu);margin-top:3px}
.cart-remove{background:none;border:0;color:var(--faint);font-size:18px;line-height:1;cursor:pointer}
.cart-remove:hover{color:var(--shu)}

.totals{font-size:13px}
.totals .row-t{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0}
.totals .row-t span:last-child{font-family:var(--f-mono)}
.totals .row-t.grand{border-top:1px solid var(--rule);margin-top:6px;padding-top:12px}
.totals .row-t.grand span{font-family:var(--f-display);font-size:20px;font-weight:600}

.gauge{height:3px;background:var(--rule-soft);margin-bottom:10px}
.gauge span{display:block;height:100%;background:var(--shu);transition:width .3s}

/* ── Tunnel de commande ──────────────────────────────────────────────────── */

.steps{
  display:flex;flex-wrap:wrap;gap:22px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:clamp(24px,4vw,40px);
}
.steps .is-current{color:var(--shu)}
.steps .is-done{color:var(--sumi)}

.pick{display:block;background:var(--washi-2);border:1px solid var(--rule);border-radius:3px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .18s}
.pick:hover{border-color:var(--sumi-2)}
.pick.is-on{border-color:var(--shu)}
.pick-title{font-family:var(--f-display);font-size:16px;font-weight:600}
.pick-meta{font-size:12.5px;color:var(--sumi-2)}
.pick-price{font-family:var(--f-display);font-size:17px;font-weight:600;white-space:nowrap}

/* ── Commande rapide ─────────────────────────────────────────────────────── */

.qo-table{width:100%;font-size:13.5px;background:var(--washi-2);border-collapse:collapse}
.qo-table th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:400;text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--sumi);white-space:nowrap;
}
.qo-table td{padding:10px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.qo-table tr:last-child td{border-bottom:0}
.qo-table tbody tr:hover{background:var(--washi)}
.qo-vis{width:42px;height:42px;background:var(--washi-3);border:1px solid var(--rule);border-radius:3px;display:flex;align-items:center;justify-content:center}
.qo-vis img{max-width:82%;max-height:82%;object-fit:contain}
.qo-vis .card-code{font-size:12px}
.qo-name{font-family:var(--f-display);font-size:15px;font-weight:600;line-height:1.3}
.qo-cell{min-width:190px}
.qo-qty{width:64px;height:34px;text-align:center;font-family:var(--f-mono);font-size:13px;background:var(--washi);border:1px solid var(--rule);border-radius:3px}
/* Réserve la hauteur de la barre collante : sans cela, les dernières lignes
   du tableau restent inaccessibles sur mobile. */
.qo-scroll{padding-bottom:12px}
.qo-bar{
  position:sticky;bottom:0;z-index:1020;background:var(--sumi);color:var(--washi-2);
  padding:14px clamp(16px,3vw,26px);display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-top:1px solid var(--sumi);
}
.qo-bar .qo-sum{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em}
.qo-bar .qo-sum b{font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:0}

/* ── Tableaux ────────────────────────────────────────────────────────────── */

.pk-table{width:100%;font-size:13.5px;border-collapse:collapse}
.pk-table th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:400;text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);
}
.pk-table td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.pk-table tbody tr:last-child td{border-bottom:0}
.pk-table tfoot td{border-top:1px solid var(--rule);border-bottom:0;padding:8px 14px}

/* ── Formulaires ─────────────────────────────────────────────────────────── */

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label,.form-label{font-size:12.5px;color:var(--sumi-2);letter-spacing:0;text-transform:none;margin:0}
.field .hint,.form-text{font-size:11.5px;color:var(--faint)}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:start}
.contact-list{list-style:none;border-top:1px solid var(--rule);padding:0;margin:0}
.contact-list li{border-bottom:1px solid var(--rule);padding:18px 0;display:flex;gap:16px;align-items:flex-start}
.contact-list .k{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);flex:0 0 92px;padding-top:4px;
}
.contact-list .v{font-family:var(--f-display);font-size:18px;font-weight:600}
.contact-list .v small{
  display:block;font-family:var(--f-body);font-size:12.5px;font-weight:400;
  color:var(--faint);letter-spacing:0;
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{
  background:var(--washi-2);border:1px solid var(--rule);border-radius:3px;
  padding:12px 14px;font-size:14px;font-family:var(--f-body);color:var(--sumi);
  transition:border-color .18s;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--shu);outline:none}
.form-note{font-size:12px;color:var(--faint);margin-top:16px;line-height:1.65}

/* Champ leurre : hors écran plutôt que display:none, que certains robots détectent. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── FAQ / accordéons ────────────────────────────────────────────────────── */

.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  padding:17px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;font-family:var(--f-display);font-size:16.5px;font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--f-mono);font-size:17px;color:var(--shu)}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 0 18px;color:var(--sumi-2);font-size:14px;max-width:74ch}

/* ── Pied de page ────────────────────────────────────────────────────────── */

.foot{padding:clamp(44px,6vw,66px) 0 34px;border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.foot h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:400}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--sumi-2);padding:0;margin:0}
.foot-bot{padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:11.5px;color:var(--faint)}

/* ── Messages ────────────────────────────────────────────────────────────── */

.msg{padding:14px 16px;border-radius:3px;font-size:13.5px;border:1px solid var(--rule);background:var(--washi-2)}
.msg-ok{background:var(--shu-soft);color:var(--shu-text);border-color:rgba(168,50,42,.28)}
.msg-warn{background:#FBF3E4;color:#7A5410;border-color:rgba(154,100,16,.3)}
.msg-err{background:#FBECEA;color:var(--shu-dark);border-color:rgba(168,50,42,.35)}

/* ── Apparition au défilement ────────────────────────────────────────────── */

/* Conditionné à .js : sans JavaScript, le contenu reste visible. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.rise.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

/* ── Administration ──────────────────────────────────────────────────────── */

.admin-shell{display:flex;min-height:100vh}

.admin-nav{
  width:216px;flex:0 0 216px;background:var(--sumi);padding:22px 0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
.admin-brand{
  font-family:var(--f-display);color:var(--washi-2);padding:0 20px 18px;
  font-size:17px;letter-spacing:.14em;
}
.admin-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 20px;font-size:13.5px;color:#A9A296;border-left:3px solid transparent;
}
.admin-nav a:hover{color:var(--washi-2);background:rgba(247,243,234,.05)}
.admin-nav a.active{color:var(--washi-2);background:rgba(247,243,234,.07);border-left-color:var(--shu)}
.admin-nav .count{font-family:var(--f-mono);font-size:11px;color:var(--shu)}
.admin-sep{border:0;border-top:1px solid #332E28;margin:14px 20px}
.admin-nav-foot{margin-top:auto;padding:14px 20px 0}

.admin-main{flex:1;min-width:0;padding:26px clamp(18px,2.6vw,40px) 60px}

/* En-tête de page : titre, contexte, actions. Même gabarit partout, pour que
   l'action principale se trouve toujours au même endroit. */
.page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--rule);
}
.page-head h1{font-family:var(--f-display);font-size:26px;margin:0;line-height:1.2}
.page-head .sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 5px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.back-link{font-size:13px;color:var(--sumi-2)}
.back-link:hover{color:var(--shu)}

/* Barre de filtres : un bloc, pas des champs flottants. */
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:18px;
}
.toolbar .grow{flex:1 1 200px;min-width:180px}
.toolbar .right{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--faint)}

/* Bloc de contenu avec en-tête et pied d'actions. */
.adm-block{background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:18px}
.adm-block-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--rule);
}
.adm-block-h h2{font-family:var(--f-display);font-size:16px;margin:0}
.adm-block-h .hint{font-size:12px;color:var(--faint)}
.adm-block-b{padding:18px}
/* Bloc dont le contenu n'est pas un tableau : il lui faut sa marge intérieure. */
.adm-block--pad{padding:18px}
.adm-block--pad .data{margin:0 -18px -18px;width:calc(100% + 36px)}
.adm-block .adm-block-h-inline{
  font-family:var(--f-display);font-size:16px;margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--rule-soft);
}
.adm-block-f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--rule);background:var(--washi);
  border-radius:0 0 3px 3px;
}

/* Tableau de données : lignes aérées, survol net, actions toujours visibles. */
.data{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--washi-2)}
.data th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:400;text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--washi-2);
}
.data td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.data tbody tr:last-child td{border-bottom:0}
.data tbody tr:hover{background:var(--washi)}
.data .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.data .act{text-align:right;white-space:nowrap;width:1%}
/* Les actions restent lisibles au repos : une action invisible n'existe pas. */
.data .act .btn{padding:6px 12px;font-size:12.5px}
.data .empty-row td{padding:38px 14px;text-align:center;color:var(--faint)}
.data .thumb{
  width:46px;height:46px;border:1px solid var(--rule);border-radius:3px;background:var(--washi-3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.data .thumb img{max-width:84%;max-height:84%;object-fit:contain}
.data .thumb .card-code{font-size:11px}
.cell-title{font-family:var(--f-display);font-size:15px;font-weight:600;line-height:1.25;display:block}
.cell-sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}

/* Pastilles d'état : informatives, jamais confondues avec un bouton. */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  padding:3px 9px;border-radius:999px;background:var(--washi-3);color:var(--sumi-2);
  white-space:nowrap;
}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.pill-ok{background:#E9F0E4;color:#2F5222}
.pill-warn{background:#FBF3E4;color:#7A5410}
.pill-alert{background:#FBECEA;color:var(--shu-dark)}
.pill-mute{background:var(--washi-3);color:var(--faint)}
.pill-info{background:var(--shu-soft);color:var(--shu-text)}
.pill--flat::before{display:none}

/* Indicateurs chiffrés du tableau de bord. */
.stat{background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px}
.stat b{display:block;font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.2}
.stat span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stat a{color:inherit}

/* Barre d'enregistrement collante : sur un formulaire long, le bouton ne doit
   pas se trouver au hasard de la colonne la plus courte. */
.save-bar{
  position:sticky;bottom:0;z-index:20;margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--washi-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:12px 16px;box-shadow:0 -1px 0 var(--rule);
}
.save-bar p{margin:0;font-size:12px;color:var(--faint)}

/* Champs de formulaire admin : libellés lisibles, groupes espacés. */
.admin-main .form-label{font-size:12px;color:var(--sumi-2);margin-bottom:4px}
.admin-main .form-text{font-size:11.5px;color:var(--faint);margin-top:3px}
.field-group{margin-bottom:20px}
.field-group:last-child{margin-bottom:0}
.field-group > h3{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:400;margin:0 0 10px;
}

/* Variante : une carte par SKU, en-tête identifiant et pied d'actions. */
.variant{border:1px solid var(--rule);border-radius:var(--radius);background:var(--washi-2);margin-bottom:14px}
.variant-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--washi);
  border-radius:3px 3px 0 0;
}
.variant-h .sku{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em}
.variant-b{padding:16px}
.variant-f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-top:1px solid var(--rule);
}
details.adm-block > summary::-webkit-details-marker{display:none}
details.adm-block > summary::after{content:'+';font-family:var(--f-mono);font-size:17px;color:var(--shu)}
details.adm-block[open] > summary::after{content:'–'}
details.adm-block > summary .hint{margin-left:auto;margin-right:12px}

.danger-link{background:none;border:0;padding:0;font-size:12.5px;color:var(--shu);cursor:pointer}
.danger-link:hover{text-decoration:underline}

@media (max-width:900px){
  .admin-shell{flex-direction:column}
  /* Le menu passe en barre horizontale défilante : empilé, il occupait un écran
     entier avant le premier contenu utile. */
  .admin-nav{
    position:sticky;top:0;z-index:30;height:auto;width:100%;flex-basis:auto;
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:0 6px;
    align-items:center;gap:2px;
  }
  .admin-nav nav{display:flex;flex-wrap:nowrap}
  .admin-nav a{
    flex:0 0 auto;border-left:0;border-bottom:3px solid transparent;
    padding:12px 12px;white-space:nowrap;
  }
  .admin-nav a.active{border-left:0;border-bottom-color:var(--shu);background:none}
  .admin-brand{padding:0 12px;width:auto;font-size:15px;flex:0 0 auto}
  .admin-sep,.admin-nav-foot{display:none}
  .admin-main{padding:18px 14px 50px}
  .page-head{align-items:flex-start}
  /* Les tableaux de données défilent plutôt que de déborder. */
  .adm-block{overflow-x:auto}
  .data{min-width:640px}
}

/* ── Surcharges Bootstrap ────────────────────────────────────────────────── */

.form-control,.form-select{
  background:var(--washi-2);border:1px solid var(--rule);border-radius:3px;
  padding:11px 14px;font-size:14px;color:var(--sumi);
}
.form-control:focus,.form-select:focus{background:var(--washi-2);border-color:var(--shu);box-shadow:none;color:var(--sumi)}
.form-control::placeholder{color:var(--faint)}
.form-control-sm,.form-select-sm{padding:7px 10px;font-size:13px}
.form-check-input:checked{background-color:var(--shu);border-color:var(--shu)}
.form-check-input:focus{border-color:var(--shu);box-shadow:none}
.table{color:var(--sumi);--bs-table-bg:transparent}
.alert{border-radius:3px;border:1px solid var(--rule);background:var(--washi-2);color:var(--sumi);font-size:13.5px}
.alert-success{background:#EDF3E9;border-color:rgba(63,107,46,.3);color:#2F5222}
.alert-danger{background:#FBECEA;border-color:rgba(168,50,42,.35);color:var(--shu-dark)}
.alert-warning{background:#FBF3E4;border-color:rgba(154,100,16,.3);color:#7A5410}
.alert-info{background:var(--shu-soft);border-color:rgba(168,50,42,.24);color:var(--shu-text)}
.btn-close:focus{box-shadow:none}
code{color:var(--shu-text);font-family:var(--f-mono);font-size:.9em}

/* ── Points de rupture ───────────────────────────────────────────────────── */

@media (max-width:1180px){.rail{display:none}}
@media (max-width:1040px){.pk-nav-links{gap:18px}.pk-nav-links a{font-size:12.5px}}
@media (max-width:900px){
  .hero-grid,.feat-grid{grid-template-columns:1fr}
  .feat-vis{aspect-ratio:16/9}
  .strip-in{grid-template-columns:1fr 1fr}
  .strip-cell:nth-child(2){border-right:0}
  .strip-cell:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .chain{grid-template-columns:1fr 1fr}
  .chain-step:nth-child(2){border-right:0}
  .chain-step:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .admin-nav{width:170px;flex-basis:170px}
}
@media (max-width:720px){
  .brand-logo{width:108px}
  .pk-nav-links{display:none}
  .pk-nav-links.open{
    display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--washi);border-bottom:1px solid var(--rule);
    padding:8px var(--gut) 18px;
  }
  .pk-nav-links.open a{padding:11px 0;width:100%;border-bottom:1px solid var(--rule-soft)}
  .nav-toggle{display:flex}
  .strip-in,.chain{grid-template-columns:1fr}
  .strip-cell,.chain-step{border-right:0;border-bottom:1px solid var(--rule);padding-left:0!important;padding-right:0}
  .strip-cell:last-child,.chain-step:last-child{border-bottom:0}
  .foot-grid{grid-template-columns:1fr}
  .tab{padding:12px 14px}
  .feat-tiers{grid-template-columns:1fr 1fr}
  .feat-tier:nth-child(2){border-right:0}
  .feat-tier:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .qo-cell{min-width:150px}
  .form-grid{grid-template-columns:1fr}
  .contact-list li{flex-direction:column;gap:4px}
  .contact-list .k{flex:none;padding-top:0}
  .admin-shell{flex-direction:column}
  .admin-nav{width:100%;flex-basis:auto;display:flex;flex-wrap:wrap;padding:10px}
  .admin-brand{padding:6px 12px;width:100%}
  .admin-nav a{border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
  .admin-nav a:hover,.admin-nav a.active{border-left:0;border-bottom-color:var(--shu)}
  .admin-sep{display:none}
}