/* ============================================================
   Boutique Printig. Même langage graphique que l'app BAT :
   aplats CMJN pastel, zéro ombre, zéro dégradé de surface, la couleur
   découpe les étapes. Neutres tirés vers le crème pour un rendu plus
   chaleureux (le BAT, outil d'atelier, reste sur des neutres froids).
   ============================================================ */
:root {
  --c-cyan: oklch(76% 0.085 215);      --c-cyan-soft: oklch(93% 0.035 215);    --c-cyan-ink: oklch(30% 0.09 215);
  --c-magenta: oklch(78% 0.085 350);   --c-magenta-soft: oklch(94% 0.035 350); --c-magenta-ink: oklch(32% 0.095 350);
  --c-yellow: oklch(84% 0.095 92);     --c-yellow-soft: oklch(95% 0.05 92);    --c-yellow-ink: oklch(34% 0.075 85);
  --c-green: oklch(76% 0.085 150);     --c-green-soft: oklch(93% 0.035 150);   --c-green-ink: oklch(32% 0.075 150);
  --c-red: oklch(76% 0.095 22);        --c-red-soft: oklch(94% 0.035 22);      --c-red-ink: oklch(36% 0.10 22);

  /* neutres papier chauds */
  --ink: oklch(27% 0.02 60);
  --ink-2: oklch(42% 0.02 60);
  --muted: oklch(52% 0.018 60);
  --line: oklch(88% 0.016 80);
  --line-2: oklch(92.5% 0.012 80);
  --paper: oklch(97.6% 0.014 85);
  --surface: oklch(99.4% 0.006 85);
  --surface-2: oklch(96.5% 0.014 85);

  --brand: var(--c-cyan); --brand-ink: var(--c-cyan-ink); --brand-soft: var(--c-cyan-soft);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font: 15px/1.55 var(--font);
  background: radial-gradient(circle at 1px 1px, oklch(40% 0.03 70 / 7%) 1px, transparent 0) 0 0 / 22px 22px, var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand-ink); }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0; }
.mono { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .92rem; }
.grow { flex: 1; }

/* en-tête : surface chaude, vrai logo, pas de bandeau saturé */
.bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.bar-in { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; }
.logo { display: block; line-height: 0; }
.logo img { height: 40px; width: auto; max-width: 50vw; object-fit: contain; object-position: left center; display: block; }
.tagline { color: var(--ink-2); font-size: .85rem; line-height: 1.3; font-weight: 600; }
.nav { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .92rem; padding: 8px 14px; border-radius: var(--r-pill); }
.nav:hover { background: var(--surface-2); }
.nav.on { background: var(--c-cyan-soft); color: var(--c-cyan-ink); }
.nav b { background: var(--c-magenta); color: var(--c-magenta-ink); border-radius: var(--r-pill); padding: 0 8px; margin-left: 8px; font-size: .78rem; }
@media (max-width: 700px) { .tagline { display: none; } .bar-in { padding: 10px 14px; gap: 6px; } .logo img { height: 30px; } }

.wrap { max-width: 1400px; margin: 0 auto; padding: 24px 24px 72px; }
@media (max-width: 700px) { .wrap { padding: 16px 14px 48px; } }

/* boutons : aplat pastel + texte encre, inversion au survol (comme le BAT) */
button, .btn { font: inherit; font-weight: 700; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.dark, .btn.blue { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.dark:hover, .btn.blue:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; min-height: 50px; font-size: 1rem; }
.link { background: none; border: 0; color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; }
.link.danger { color: var(--c-red-ink); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-cyan); }

/* champs */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea { width: 100%; padding: 10px 12px; font: inherit; font-weight: 500; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--c-cyan-ink); }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23737B87' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center; }

/* catalogue */
.hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.hero h1 { font-size: 2rem; }
.search { width: 100%; max-width: 420px; border-radius: var(--r-pill); padding: 12px 20px; background: var(--surface); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }
.pills button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r-pill); padding: 9px 20px; transition: background .15s, color .15s; }
.pills button:hover { background: var(--surface-2); }
.pills button[aria-pressed=true] { background: var(--c-cyan-soft); border-color: var(--c-cyan); color: var(--c-cyan-ink); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card-p { display: block; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 12px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, background .15s; }
.card-p:hover { border-color: var(--c-cyan); background: #fff; }
.card-p img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #fff; border-radius: var(--r); display: block; }
.card-p h3 { font-size: 1.02rem; text-align: center; margin-top: 12px; }
.card-p .sub { text-align: center; color: var(--muted); font-size: .88rem; margin: 2px 0 12px; }
.card-p hr { display: none; }
.dots { display: flex; justify-content: center; gap: 6px; background: var(--surface-2); width: max-content; margin: 0 auto 8px; padding: 6px 12px; border-radius: var(--r-pill); }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.card-p .avail { text-align: center; font-size: .84rem; color: var(--muted); }
.card-p .price { text-align: center; font-size: .88rem; color: var(--ink-2); margin-top: 4px; }
.card-p .price b { font-size: 1.1rem; color: var(--c-cyan-ink); font-variant-numeric: tabular-nums; }
.vide { color: var(--muted); padding: 32px 0; }

/* fiche produit */
.prod { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .prod { grid-template-columns: minmax(0, 1fr); } }
.stage-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; position: sticky; top: 88px; /* sous la barre du haut (76 px), sinon les boutons Face / Dos passent derrière */ }
@media (max-width: 980px) { .stage-card { position: static; } }
.stage-top { display: flex; justify-content: center; margin-bottom: 8px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border-radius: var(--r-pill); }
.seg button { border: 0; background: none; color: var(--ink-2); border-radius: var(--r-pill); padding: 9px 26px; }
.seg button[aria-pressed=true] { background: var(--c-cyan-soft); color: var(--c-cyan-ink); box-shadow: inset 0 0 0 1px var(--c-cyan); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
/* bouton « + » du sélecteur de vues et son menu (manches) */
.seg { flex-wrap: wrap; justify-content: center; }
.seg .plus { padding: 9px 16px; font-size: 1.15rem; line-height: 1; }
.plus-wrap { position: relative; display: inline-flex; }
.menu-vues { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.menu-vues[hidden] { display: none; }
.seg .menu-vues button { text-align: left; padding: 9px 14px; border-radius: 8px; white-space: nowrap; }
.seg .menu-vues button:not(:disabled):hover { background: var(--surface-2, #f3f3f3); }
.menu-vues p { margin: 4px 8px 2px; font-size: .75rem; color: var(--muted, #777); max-width: 190px; }
/* avertissement de placement (comme rendered.co) : bouton d'alerte en haut à droite de l'aperçu et carte qui dit pourquoi, sans zones dessinées */
.stage-top { position: relative; }
.avert-bouton { position: absolute; right: 0; top: 0; z-index: 31; width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #d4a843; background: var(--surface, #fff); color: #d4a843; cursor: pointer; }
.avert-bouton:hover { background: #fbf3dd; }
.avert-carte { position: absolute; right: 0; top: 50px; z-index: 30; width: min(340px, 100%); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface, #fff); border: 1.5px solid #d4a843; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.avert-carte strong { display: block; font-size: .95rem; color: var(--ink, #222); }
.avert-carte p { margin: 2px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2, #444); }
.avert-x { flex: none; border: 0; background: none; color: #b98f27; font-size: 1.5rem; line-height: 1; padding: 0 2px; cursor: pointer; }
.avert-bouton[hidden], .avert-carte[hidden] { display: none; }
@media (max-width: 600px) { .avert-bouton { top: 52px; right: 6px; } .avert-carte { top: 102px; } }
.stage { position: relative; width: 100%; margin: 0 auto; touch-action: none; user-select: none; background: #fff; border-radius: var(--r); }
.stage > img.garment { display: block; width: 100%; height: auto; pointer-events: none; }
/* zones où l'on n'imprime pas (capuche, manches, zip) : hachures grises par-dessus la photo, sans gêner le déplacement du visuel */
.interdit { position: absolute; pointer-events: none; z-index: 1; display: flex; align-items: flex-start; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(128, 128, 128, .34) 0 6px, rgba(128, 128, 128, 0) 6px 12px); }
.interdit span { margin-top: 6px; padding: 2px 8px; background: rgba(255, 255, 255, .85); color: #333; border-radius: 4px; font-size: .72rem; line-height: 1.3; white-space: nowrap; }
.drop { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 46%; padding: 20px 12px; text-align: center; color: var(--ink);
  background: oklch(99% 0.006 85 / 90%); border: 2px dashed var(--c-cyan-ink); border-radius: var(--r-lg); cursor: pointer; font-size: .9rem; }
.drop:hover { background: var(--c-cyan-soft); }
.drop.over { background: var(--c-cyan-soft); box-shadow: 0 0 0 3px var(--c-cyan); }
.drop b { display: block; margin: 4px 0; color: var(--c-cyan-ink); }
.drop small { display: block; color: var(--ink-2); }
.design { position: absolute; transform: translate(-50%, -50%); cursor: grab; outline: 1px dashed var(--c-cyan-ink); }
.design:active { cursor: grabbing; }
.design img, .design .pdf { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.design .pdf { display: grid; place-items: center; background: var(--c-cyan-soft); color: var(--c-cyan-ink); font-weight: 800; }
.design .x { position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 0;
  background: var(--c-magenta); color: var(--c-magenta-ink); line-height: 1; font-size: 1rem; }
.design .rz { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; background: var(--surface); border: 2px solid var(--c-cyan-ink); border-radius: 5px; cursor: nwse-resize; }
.design .cote { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); background: var(--c-cyan-ink); color: var(--c-cyan-soft);
  font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-indic { color: var(--muted); font-size: .8rem; text-align: center; margin-top: 10px; }

/* fiche produit : le vêtement seul, avec le bouton Personnaliser (la personnalisation est sur personnaliser.html) */
.fiche-photo { position: relative; background: #fff; border-radius: var(--r); }
.garment-fiche { display: block; width: 100%; height: auto; border-radius: var(--r); }
.fiche-cta { position: absolute; top: 14px; right: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.fiche-cta-bas { margin: 22px auto 6px; max-width: 420px; }
.colonne { display: grid; gap: 14px; align-content: start; }

.panel { display: grid; gap: 14px; }
.box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px 20px; }
.box.sand { background: var(--surface-2); }
.box.tint-cyan { background: var(--surface-2); border-color: var(--line); }
.box.tint-yellow { background: var(--surface-2); border-color: var(--line); }
.box.tint-magenta { background: var(--surface-2); border-color: var(--line); }
.title { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.title h1 { font-size: 1.45rem; }
.from { text-align: right; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.from b { display: block; font-size: 1.3rem; color: var(--c-cyan-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .title { flex-wrap: wrap; } .from { white-space: normal; text-align: left; } }
.sect { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 -4px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.slot { aspect-ratio: 1.15; border-radius: var(--r); border: 1.5px dashed var(--line); background: var(--surface); display: grid; place-items: center; text-align: center;
  font-size: .78rem; font-weight: 700; padding: 6px; overflow: hidden; color: var(--c-cyan-ink); }
.slot.add { background: var(--surface); border-style: solid; border-color: var(--line); cursor: pointer; transition: background .15s, color .15s; }
.slot.add:hover { background: var(--c-cyan-ink); color: var(--c-cyan-soft); }
.slot img { max-width: 100%; max-height: 70%; object-fit: contain; }
.slot .t { font-weight: 600; font-size: .7rem; color: var(--ink-2); }
.slot.on { background: var(--surface); border: 2px solid var(--ink); }
.techs { display: flex; gap: 8px; flex-wrap: wrap; }
.techs button { border: 1px solid var(--c-cyan); background: var(--surface); color: var(--c-cyan-ink); border-radius: var(--r-pill); padding: 8px 18px; }
.techs button:hover { background: var(--c-cyan-soft); }
.techs button[aria-pressed=true] { background: var(--c-cyan-ink); border-color: var(--c-cyan-ink); color: var(--c-cyan-soft); }
.colorbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink); }
.box.tint-cyan strong, .box.tint-yellow strong, .box.tint-magenta strong { color: var(--ink); }
.colorbar .cur { margin-left: auto; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; margin-top: 12px; }
.sw button { aspect-ratio: 1; min-height: 0; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); padding: 0; }
.sw button:hover { border-color: var(--c-yellow-ink); }
.sw button[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.banner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.banner > div { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; text-align: center; font-weight: 700; }
.banner > div.m { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
@media (max-width: 600px) { .banner { grid-template-columns: 1fr; } }
.qty-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; color: var(--ink); }
@media (max-width: 700px) { .qty-wrap { grid-template-columns: 1fr; } }
.qty { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qty div { text-align: center; }
.qty input { text-align: center; padding: 10px 2px; font-variant-numeric: tabular-nums; }
.qty label { text-align: center; margin: 0 0 4px; }
.includes { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; text-align: center; color: var(--ink); }
.includes h3 { font-size: .95rem; }
.includes p { font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.tiers { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tiers th { font-weight: 600; color: var(--muted); padding: 6px; font-size: .8rem; }
.tiers td { padding: 7px 6px; text-align: center; border-top: 1px solid var(--line-2); }
.tiers tr.on td { font-weight: 800; background: var(--surface); color: var(--ink); }
.recap dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 12px; font-size: .92rem; }
.recap dt { color: var(--ink-2); }
.recap dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap .tot { font-size: 1.9rem; font-weight: 800; color: var(--c-cyan-ink); font-variant-numeric: tabular-nums; }
.msg { border-radius: var(--r-sm); padding: 10px 12px; font-size: .88rem; margin: 0 0 8px; }
.msg.warn { background: var(--c-yellow-soft); color: var(--c-yellow-ink); }
.msg.err { background: var(--c-red-soft); color: var(--c-red-ink); }
.msg.ok { background: var(--c-green-soft); color: var(--c-green-ink); }
.opts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; }
.opts label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-weight: 500; }
details.reglage { margin-top: 10px; font-size: .88rem; }
details.reglage summary { cursor: pointer; font-weight: 700; color: var(--c-cyan-ink); }
.deco { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
@media (max-width: 800px) { .deco { grid-template-columns: 1fr; } }
.deco ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: .9rem; }
.deco li { margin-bottom: 8px; } .deco li small { display: block; color: var(--muted); }
.avantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; font-size: .9rem; color: var(--ink-2); }
.avantages h3 { font-size: .95rem; margin-bottom: 4px; color: var(--ink); }

/* panier / paiement */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 12px; }
.item { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.item:first-of-type { border-top: 0; }
.item img { width: 90px; height: 90px; object-fit: contain; background: #fff; border-radius: var(--r); }
.item .meta { font-size: .85rem; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); }
.check input { margin-top: 3px; }
.center { max-width: 560px; margin: 48px auto; text-align: center; }
.center h1 { margin-bottom: 12px; }

@media (max-width: 600px) {
  .drop { width: 70%; padding: 14px 8px; font-size: .8rem; }
  .seg button { padding: 9px 13px; font-size: .92rem; }
  .seg .plus { padding: 9px 12px; }
}

/* couleurs d'encre détectées */
.encres { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; margin-bottom: 8px; }
.encres-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.encres-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.encre label { margin: 6px 0 4px; font-size: .74rem; }
.encre.hors { opacity: .55; }
.puce { height: 52px; border-radius: var(--r-sm); border: 1px solid rgba(0,0,0,.15); position: relative; }
.puce .part { position: absolute; right: 6px; bottom: 4px; background: oklch(99% 0.006 85 / 85%); color: var(--ink); font-size: .68rem; font-weight: 700; padding: 0 6px; border-radius: var(--r-pill); }
.seg.petit button { padding: 6px 14px; font-size: .8rem; }

/* ---------- navigation à menus ---------- */
.nav-principale { display: flex; align-items: center; gap: 2px; }
.menu { position: relative; }
.nav .chev { margin-left: 6px; font-size: .7rem; color: var(--muted); }
.menu-liste { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); z-index: 30; }
.menu:hover .menu-liste, .menu:focus-within .menu-liste { display: block; }
.menu-liste a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.menu-liste a:hover { background: var(--c-cyan-soft); color: var(--c-cyan-ink); }
.menu-liste a.tout { color: var(--c-cyan-ink); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 4px; }
@media (max-width: 900px) { .nav-principale { display: none; } }

/* ---------- accueil ---------- */
.hero-acc { background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.hero-in { max-width: 1400px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; padding: 32px 16px; gap: 28px; } }
.sur { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cyan-ink); margin-bottom: 12px; }
.hero-txt h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
.hero-txt h1 span { color: var(--c-cyan-ink); }
.hero-txt .lead { font-size: 1.1rem; color: var(--ink-2); margin: 18px 0 24px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 24px 0 0; color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.points li::before { content: "✓"; margin-right: 8px; color: var(--c-green-ink); }
.hero-photos { position: relative; min-height: 520px; }
.ph { position: absolute; display: block; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 10px; text-decoration: none; color: var(--ink); width: 46%; transition: transform .2s; }
.ph img { width: 100%; display: block; border-radius: var(--r); }
.ph span { display: block; text-align: center; font-weight: 700; font-size: .85rem; padding: 6px 0 2px; }
.ph1 { left: 0; top: 30px; width: 42%; transform: rotate(-3deg); z-index: 2; }
.ph2 { right: 0; top: 0; width: 42%; transform: rotate(2.5deg); }
.ph3 { left: 30%; top: 46%; width: 38%; transform: rotate(-1deg); z-index: 3; }
.ph:hover { transform: rotate(0) scale(1.03); z-index: 5; }
@media (max-width: 900px) { .hero-photos { min-height: 440px; } }
.bloc { padding: 56px 0; }
.bloc.teinte { background: var(--surface-2); border-block: 1px solid var(--line-2); }
.bloc-in { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 700px) { .bloc { padding: 36px 0; } .bloc-in { padding: 0 16px; } }
.bloc h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 22px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tuile { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
.tuile:hover { border-color: var(--c-cyan); background: #fff; }
.tuile img { width: 70%; aspect-ratio: 4/5; object-fit: contain; background: #fff; border-radius: var(--r); }
.tuile h3 { margin-top: 12px; font-size: 1.15rem; }
.tuile .mono b { color: var(--c-cyan-ink); font-size: 1.05rem; }
.tuile .voir { margin-top: 10px; font-weight: 700; color: var(--c-cyan-ink); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.etape { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.etape .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-cyan-soft); color: var(--c-cyan-ink); font-weight: 800; margin-bottom: 12px; }
.etape h3 { font-size: 1.05rem; margin-bottom: 6px; }
.etape p { color: var(--ink-2); font-size: .92rem; }
.duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 24px; } }
.coches { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.coches li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.coches li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-green-ink); font-weight: 800; }
.coches li span { color: var(--ink-2); font-size: .92rem; }
.photo-gde { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; max-width: 460px; justify-self: center; }
.photo-gde img { width: 100%; display: block; }
.aide { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 36px 24px; text-align: center; max-width: 860px; margin: 0 auto; }
.aide p { color: var(--ink-2); margin: 0 auto 20px; max-width: 40em; }
.aide .actions { justify-content: center; }

/* ---------- pied de page ---------- */
.pied { background: var(--surface-2); border-top: 1px solid var(--line); margin-top: 24px; }
.pied-in { max-width: 1400px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.pied h3 { font-size: 1rem; margin-bottom: 10px; }
.pied p { margin-bottom: 6px; color: var(--ink-2); font-size: .92rem; }
.pied a { color: var(--ink-2); }
.pied a:hover { color: var(--c-cyan-ink); }
.pied .petit { font-size: .8rem; color: var(--muted); }
.pied-logo img { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 8px; }
.pied-marque { display: grid; gap: 14px; align-content: start; justify-items: start; }
.badge-ss-pied { display: block; width: 168px; max-width: 100%; height: auto; }

/* ---------- catalogue ---------- */
.outils { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.outils .search { max-width: 460px; }
.tri { display: flex; align-items: center; gap: 10px; }
.tri label { margin: 0; white-space: nowrap; }
.tri select { width: auto; }
.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } }
.cat-titre { font-size: 2rem; margin-bottom: 4px; }
.cat-layout .mono { margin-bottom: 16px; }
.filtres { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px; position: sticky; top: 84px; }
@media (max-width: 900px) { .filtres { position: static; } }
.filtres-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.filtre { border-top: 1px solid var(--line); padding: 10px 0; }
.filtre summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.case { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 500; color: var(--ink); cursor: pointer; }
.case em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .8rem; }
.foot-prix { text-align: center; font-size: .86rem; color: var(--ink-2); margin: 12px -12px -18px; padding: 10px 8px; background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.foot-prix b { color: var(--c-cyan-ink); font-size: 1rem; }

/* ---------- photo d'atelier, revendeur officiel, galerie ---------- */
.hero-photo { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.badge-ss { position: absolute; left: 14px; bottom: 14px; background: oklch(99.4% 0.006 85 / 94%); color: var(--ink); border-radius: var(--r); padding: 8px 14px; font-weight: 700; font-size: .9rem; line-height: 1.25; }
.badge-ss b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-green-ink); }
.bandeau-ss { background: var(--surface); border-bottom: 1px solid var(--line-2); }
.bandeau-ss p { padding: 16px 0; text-align: center; color: var(--ink-2); font-size: .95rem; }
.pastille-ss { display: inline-block; margin-top: 8px; background: var(--c-green-soft); color: var(--c-green-ink); border-radius: var(--r-pill); padding: 3px 12px; font-size: .74rem; font-weight: 700; }
.ambiance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ambiance img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line-2); }

/* ---------- accueil : photo d'atelier en fond, en entier ---------- */
.hero-acc { position: relative; min-height: min(82vh, 760px); display: flex; align-items: center; border-bottom: 0;
  background: linear-gradient(90deg, rgba(20, 16, 12, .78) 0%, rgba(20, 16, 12, .55) 48%, rgba(20, 16, 12, .18) 100%), url("/brand/atelier.jpg") center / cover no-repeat; }
.hero-acc .hero-in { grid-template-columns: minmax(0, 760px); width: 100%; }
.hero-acc .hero-txt h1, .hero-acc .hero-txt .lead, .hero-acc .points { color: #fff8ee; }
.hero-acc .hero-txt h1 span { color: var(--c-yellow); }
.hero-acc .sur { color: var(--c-yellow); }
.hero-acc .points li::before { color: var(--c-yellow); }
.hero-acc .btn:not(.dark) { background: oklch(99.4% 0.006 85 / 94%); border-color: transparent; }
.hero-acc .badge-ss { position: static; display: inline-block; margin-top: 26px; }
.credit-photo { position: absolute; right: 18px; bottom: 12px; margin: 0; color: rgba(255, 248, 238, .8); font-size: .78rem; }
@media (max-width: 900px) {
  .hero-acc { min-height: 70vh; background-position: 62% center;
    background-image: linear-gradient(180deg, rgba(20, 16, 12, .74), rgba(20, 16, 12, .62)), url("/brand/atelier.jpg"); }
}

/* Photos de vêtements blancs : fond crème, le blanc des photos prend la teinte de la carte */
.card-p img, .tuile img { background: var(--surface-2); mix-blend-mode: multiply; }

/* ---------- encres spéciales ---------- */
.encre-spec { margin: 8px 0 0; font-size: .88rem; color: var(--ink-2); }
.dlg { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
.dlg::backdrop { background: rgba(30, 24, 18, .45); }
.dlg h2 { font-size: 1.3rem; margin-bottom: 6px; }
.opt-liste { display: grid; gap: 8px; margin: 16px 0; }
.opt-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; color: var(--ink); font-weight: 500; }
.opt-ligne:hover { border-color: var(--c-cyan); }
.opt-txt strong { display: block; }
.opt-txt small, .opt-prix small { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; }
.opt-prix { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------- informations produit ---------- */
.resume-produit { padding: 0 4px; }
.resume-produit p { color: var(--ink-2); font-size: .94rem; margin-bottom: 12px; max-width: 42em; }
.resume-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sect { scroll-margin-top: 80px; }
#description { scroll-margin-top: 80px; }
details.plus { margin-top: 12px; }
details.plus summary { cursor: pointer; font-weight: 700; color: var(--c-cyan-ink); }
.detail-liste { margin: 12px 0 0; display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: .9rem; }
.detail-liste dt { color: var(--muted); font-weight: 700; }
.detail-liste dd { margin: 0; }
.detail-liste ul { margin: 0; padding-left: 18px; }
@media (max-width: 600px) { .detail-liste { grid-template-columns: 1fr; gap: 2px; } .detail-liste dd { margin-bottom: 8px; } }
.sous-t { font-size: .95rem; margin: 16px 0 8px; }
.table-defil { overflow-x: auto; }
.mesures { border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.mesures th, .mesures td { padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.mesures thead th { color: var(--muted); font-weight: 700; font-size: .76rem; }
.mesures tbody th { text-align: left; }

/* ---------- page Stanley/Stella ---------- */
.marque-hero { background: var(--surface-2); border-bottom: 1px solid var(--line-2); padding: 56px 0 48px; }
.marque-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.02em; }
.marque-hero .lead { max-width: 40em; color: var(--ink-2); font-size: 1.1rem; margin: 14px 0 22px; }
.badge-ss.statique { position: static; display: inline-block; margin-top: 24px; background: var(--surface); border: 1px solid var(--line); }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .deux-col { grid-template-columns: 1fr; gap: 24px; } }
.texte p { margin-bottom: 14px; color: var(--ink-2); max-width: 38em; }
.frise { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.frise li { position: relative; color: var(--ink-2); font-size: .92rem; }
.frise li::before { content: ""; position: absolute; left: -25px; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--c-cyan); border: 2px solid var(--surface); }
.frise b { color: var(--ink); margin-right: 8px; }
.intro { color: var(--ink-2); margin: -8px 0 20px; max-width: 40em; }
.labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.label-carte { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.label-carte h3 { font-size: 1.15rem; }
.label-carte .mono { margin: 2px 0 10px; font-size: .8rem; }
.label-carte p:last-child { color: var(--ink-2); font-size: .92rem; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.chiffres > div { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 4px; }
.chiffres b { font-size: 1.9rem; color: var(--c-cyan-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.chiffres span { color: var(--ink-2); font-size: .88rem; }
.raisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.raisons article { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; }
.raisons .num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-cyan-soft); color: var(--c-cyan-ink); font-weight: 800; margin-bottom: 10px; }
.raisons h3 { font-size: 1.05rem; margin-bottom: 6px; }
.raisons p { color: var(--ink-2); font-size: .92rem; }

/* broderie : fil Madeira par couleur, simulation et choix du fil */
.fil-ref { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 8px; width: 100%; text-align: left; padding: 8px 10px; min-height: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); }
.fil-ref:hover:not(:disabled) { border-color: var(--c-cyan-ink); }
.fil-ref .marque { grid-column: 1 / -1; font-size: .62rem; letter-spacing: .12em; font-weight: 800; color: #1b6b3a; }
.fil-ref b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fil-ref small { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-ref .edit { grid-column: 1 / -1; margin-top: 4px; font-size: .72rem; font-weight: 700; color: var(--c-cyan-ink); text-decoration: underline; text-underline-offset: 2px; }
.fil-ref:disabled { opacity: .5; cursor: not-allowed; }
.badge-sim { position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none; background: oklch(99% 0.006 85 / 88%); color: var(--c-cyan-ink);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.dlg-fils { width: min(720px, 94vw); }
.dlg-apercu { width: min(780px, 94vw); }
/* BAT proposé pour voir le vrai rendu d'une broderie */
.bat-broderie { margin: 12px 0 8px; padding: 12px 14px; background: var(--c-yellow-soft); border: 1px solid var(--c-yellow); border-radius: var(--r); }
.bat-broderie small { display: block; margin-top: 4px; color: var(--ink-2); font-weight: 400; }
/* un bloc par visuel (côté, taille, couleurs) et reprise d'un visuel du panier */
.visuel-bloc { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; margin-top: 10px; }
.visuel-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.visuel-tete small { display: block; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.visuel-mini { width: 52px; height: 52px; object-fit: contain; flex: none; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; }
.visuel-mini.pdf { display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: var(--c-cyan-ink); }
.visuel-taille { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 10px; }
.visuel-bloc .encres { border: 0; padding: 0; margin: 0 0 4px; background: none; }
.reutiliser { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.reuse-btn { display: grid; justify-items: center; gap: 3px; width: 86px; padding: 6px; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.reuse-btn:hover { border-color: var(--c-cyan-ink); }
.reuse-btn img { width: 56px; height: 56px; object-fit: contain; background: var(--surface-2); border-radius: 6px; }
.reuse-btn small { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; color: var(--ink-2); }
/* fenêtre « Comment le prix est-il calculé ? » */
.dlg-prix { width: min(720px, 94vw); max-height: 90vh; overflow: auto; }
.prix-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dlg-x { background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--ink-2); padding: 0 6px; min-height: 0; }
.prix-section { background: var(--surface-2); border-radius: var(--r-lg); padding: 16px 18px; margin: 12px 0; }
.prix-section h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--c-cyan-ink); }
.prix-liste { display: grid; gap: 2px; margin: 12px 0 14px; font-size: .92rem; }
.prix-liste dt { font-weight: 700; }
.prix-liste dd { margin: 0 0 8px; color: var(--ink-2); }
.eco { background: var(--c-yellow); color: var(--c-yellow-ink); border-radius: var(--r); padding: 12px 14px; }
.eco strong { display: block; text-align: center; margin-bottom: 8px; }
.eco-lignes { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 6px 12px; font-size: .88rem; }
.eco-lignes b { align-self: center; }
@media (max-width: 600px) { .eco-lignes { grid-template-columns: 1fr; } }
.apercu-fond { display: grid; place-items: center; padding: 28px; border-radius: var(--r); margin: 8px 0 12px; }
.apercu-fond img { max-width: 100%; height: auto; }
.apercu-fils { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 8px; }
.apercu-fils li { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.apercu-fils .pt { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.fils-recherche { width: 100%; margin: 4px 0 12px; }
.fils-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; padding: 2px; }
.fil-sw { display: grid; justify-items: center; gap: 3px; padding: 4px; min-height: 0; background: none; border: 2px solid transparent; border-radius: var(--r-sm); }
.fil-sw:hover { border-color: var(--line); }
.fil-sw[aria-pressed=true] { border-color: var(--ink); }
.fil-couleur { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.fil-sw small { font-size: .68rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Changer de couleur (sérigraphie) : un bouton par encre, et la fenêtre des Pantone de base */
.btn.mini { min-height: 34px; padding: 6px 10px; font-size: .78rem; width: 100%; margin-top: 6px; }
.dlg-pantone { width: min(680px, 94vw); max-height: 92vh; overflow: auto; }
.pantone-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 14px 0 6px; padding: 2px; }
.pantone-sw { display: grid; gap: 4px; padding: 6px; min-height: 0; text-align: left; background: none; border: 2px solid transparent; border-radius: var(--r-sm); }
.pantone-sw:hover { border-color: var(--line); }
.pantone-sw[aria-pressed=true] { border-color: var(--ink); }
.pantone-sw .pastille { display: block; width: 100%; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.pantone-sw b { font-size: .82rem; line-height: 1.2; }
.pantone-sw small { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* encart d'appel vers une page (Comment ça marche -> convertisseur Pantone) */
.appel { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.appel h3 { font-size: 1.1rem; margin-bottom: 4px; }
.appel p { margin: 0; color: var(--ink-2); max-width: 46em; }

/* ---------- convertisseur RVB / CMJN vers Pantone (pantone.html) ---------- */
.conv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .conv { grid-template-columns: 1fr; } }
.conv .box { margin: 0; }
.bloc .conv .conv-titre { font-size: 1.3rem; margin-bottom: 14px; letter-spacing: -.01em; }
.bloc .conv .conv-titre::after { display: none; }
.conv-apercu { height: 96px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); margin-bottom: 14px; }
.conv-hex { display: flex; gap: 10px; align-items: center; }
.conv-hex input[type=color] { width: 56px; height: 46px; padding: 3px; flex: none; cursor: pointer; }
.conv-hex input[type=text] { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.conv-hex input[aria-invalid=true] { border-color: var(--c-red, #c0392b); }
.conv-groupe { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.conv-groupe legend { font-weight: 700; font-size: .82rem; margin-bottom: 6px; padding: 0; }
.conv-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.conv-quatuor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.conv-trio label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; margin: 0; }
.conv-trio input { width: 100%; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; padding: 10px 4px; }
.conv-compare { display: grid; grid-template-columns: 1fr 1fr; height: 128px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.conv-moitie { display: flex; align-items: flex-end; padding: 8px 12px; font-size: .78rem; font-weight: 700; }
.conv-nom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.conv-nom b { font-size: 1.5rem; line-height: 1.15; }
.conv-nom .btn.mini { width: auto; margin-top: 0; flex: none; }
.conv-details { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 14px; font-size: .92rem; }
.conv-details dt { color: var(--muted); }
.conv-details dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.conv-voisines { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.conv-voisine { display: grid; gap: 3px; text-align: left; padding: 6px; min-height: 0; background: none; border: 2px solid transparent; border-radius: var(--r-sm); }
.conv-voisine:hover { border-color: var(--line); }
.conv-voisine[aria-pressed=true] { border-color: var(--ink); }
.conv-voisine .pastille { display: block; width: 100%; height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.conv-voisine b { font-size: .84rem; }
.conv-voisine small { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.encre.retiree .puce { opacity: .35; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.12) 6px 7px); }
.encre.retiree label { text-decoration: line-through; }
.encre .link { font-size: .78rem; margin-top: 4px; }

/* ---------- retrait à l'atelier ---------- */
.check.retrait { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; }
.check.retrait strong { display: block; color: var(--ink); }
.check.retrait small { display: block; color: var(--muted); font-size: .8rem; }

/* ---------- références clients ---------- */
.refs { padding: 40px 0; }
.refs .intro { margin: -8px 0 22px; }
.refs-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.ref { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); text-align: center; }
a.ref:hover { border-color: var(--c-cyan); background: #fff; }
.ref img { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; }
.ref-nom { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink-2); }

/* ---------- logos des labels ---------- */
.label-carte { display: flex; flex-direction: column; }
.label-logo { height: 78px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 14px; align-self: flex-start; }
.label-carte:not(:has(.label-logo)) { padding-top: 20px; }

/* ---------- page atelier ---------- */
.atelier-photo { margin: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.atelier-photo img { display: block; width: 100%; height: auto; }
.atelier-photo figcaption { padding: 10px 16px; font-size: .85rem; color: var(--muted); }

/* ---------- page « Comment ça marche » ---------- */
.ancres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ancres a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: .9rem; }
.ancres a:hover { background: var(--c-cyan-soft); color: var(--c-cyan-ink); border-color: var(--c-cyan); }
.bloc[id] { scroll-margin-top: 70px; }
.sous-t { font-size: 1rem; margin: 18px 0 6px; }
.points-liste { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); font-size: .94rem; }
.points-liste strong { color: var(--ink); }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.faq details[open] summary { color: var(--c-cyan-ink); }
.faq p { color: var(--ink-2); padding: 0 0 14px; }
#etapes .etapes, #fichiers .labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { #etapes .etapes, #fichiers .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #etapes .etapes, #fichiers .labels { grid-template-columns: 1fr; } }

.badge-ss-logo { display: block; width: 190px; height: auto; margin-top: 26px; }
.hero-acc .badge-ss-logo, .hero-txt .badge-ss-logo { filter: brightness(0) invert(1); opacity: .92; }

/* variantes du logo (fond transparent) pour menus et pieds de page foncés : masquées sauf si un thème les affiche */
.logo-creme, .logo-beige { display: none; }

/* technique indisponible (ex. broderie sur un textile de moins de 220 g/m²) : bouton grisé, pas de survol */
.techs button:disabled, .techs button:disabled:hover, .techs button:disabled:active {
  background: #e7e5e0; border: 1px dashed #b3b0a8; color: #8b8880; box-shadow: none; transform: none;
  cursor: not-allowed; }
.item-actions { display: grid; gap: 6px; justify-items: end; }

/* choix « Particulier / Société ou association » du formulaire de coordonnées */
.type-client { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.type-client legend { padding: 0; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.type-client .check { margin: 0; }
[hidden] { display: none !important; }
.type-client .check { display: inline-flex; grid-template-columns: none; align-items: center; gap: 8px; width: auto; }
.type-client .check span { white-space: nowrap; }
.type-client .check input { margin: 0; }

/* Suivi de commande */
.suivi-etapes { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.suivi-etapes li { padding: 10px 14px; border-radius: var(--r-md, 12px); background: var(--surface-2); color: var(--muted); }
.suivi-etapes li.fait { color: var(--ink-2); }
.suivi-etapes li.fait b::before { content: "✓ "; }
.suivi-etapes li.en-cours { background: var(--c-cyan-soft); color: var(--c-cyan-ink); }
.suivi-produits { padding-left: 20px; }

/* Page de remerciement */
.merci-hero .bloc-in { max-width: 760px; text-align: center; }
.merci-hero .lead { margin-left: auto; margin-right: auto; font-size: 1.25rem; }
.merci-hero .actions { justify-content: center; margin-top: 8px; }
.merci-hero h1 { margin-bottom: 4px; }
.merci-icone { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-cyan-soft); color: var(--c-cyan-ink); font-size: 2rem; font-weight: 800; margin-bottom: 18px; }
.merci-aide { margin-top: 28px; text-align: center; color: var(--ink-2); }
.merci-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
#merci .bloc h2 { text-align: center; margin-bottom: 24px; }

/* Menu hamburger (petits écrans) */
.burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.bar.ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bar.ouvert .burger span:nth-child(2) { opacity: 0; }
.bar.ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { display: none; }
@media (max-width: 900px) {
  .burger { display: flex; color: var(--ink); }
  .bar.ouvert .menu-mobile { display: block; max-height: calc(100vh - 70px); overflow-y: auto; padding: 4px 14px 18px; border-top: 1px solid var(--line); background: var(--surface); }
  .menu-mobile a { display: block; padding: 13px 6px; color: var(--ink); text-decoration: none; font-weight: 700; border-radius: var(--r-sm); }
  .menu-mobile a:hover, .menu-mobile a:focus-visible { background: var(--c-cyan-soft); color: var(--c-cyan-ink); }
  .menu-mobile a.tout { color: var(--c-cyan-ink); }
  .menu-mobile-titre { margin: 14px 6px 4px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .menu-mobile hr { border: 0; border-top: 1px solid var(--line-2); margin: 8px 0; }
}
@media (max-width: 700px) { .nav-rech { display: none; } }
@media (min-width: 901px) { .menu-mobile { display: none !important; } }

/* Visuel : on y arrive depuis la bascule Face / Dos */
.visuel-bloc { scroll-margin-top: 92px; }
.visuel-focus { animation: visuelFocus 1.6s ease-out; }
@keyframes visuelFocus { 0% { box-shadow: 0 0 0 0 var(--c-cyan); } 25% { box-shadow: 0 0 0 4px var(--c-cyan); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .visuel-focus { animation: none; outline: 3px solid var(--c-cyan); outline-offset: 2px; } }

/* Conditions de vente : de l'air entre les sections */
.cgv { padding: 28px 32px 36px; margin-left: auto; margin-right: auto; }
.cgv h2 { margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--line-2); font-size: 1.25rem; }
.cgv h1 + .mono + h2 { margin-top: 28px; }
.cgv p { margin: 0 0 14px; line-height: 1.65; }
.cgv ul, .cgv ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.65; }
@media (max-width: 600px) { .cgv { padding: 20px 18px 28px; } }

/* Cartes du catalogue : le bandeau du prix reste collé en bas de la carte, quelle que soit la longueur du texte au-dessus (plus de vide blanc) */
.card-p { display: flex; flex-direction: column; }
.card-p .avail { margin-bottom: 12px; }
.card-p .foot-prix { margin-top: auto; }

/* Haut du panneau de personnalisation : retour à gauche, lien vers les quantités à droite */
.liens-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
#quantites { scroll-margin-top: 92px; }

.visuel-palette { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.visuel-palette li { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; }
.visuel-palette i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex: none; }

.visuel-rot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.visuel-rot > span { font-size: .85rem; font-weight: 700; margin-right: 2px; }
.visuel-angle { display: inline-flex; align-items: center; gap: 4px; }
.visuel-angle input { width: 64px; }

.repere-col { position: absolute; left: 50%; width: 15%; transform: translate(-50%, -1px); border-top: 2px dashed var(--v8-coral, #e5482c); pointer-events: none; }
.repere-col span { position: absolute; left: calc(100% + 6px); top: -9px; font-size: .7rem; font-weight: 700; color: var(--v8-coral, #e5482c); background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 4px; }
.visuel-place { margin: 0 0 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.place-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.place-saisie { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

.placements { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plc-svg { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto 10px; }
.plc h3 { margin-top: 0; }
.place-btns .btn { width: auto; flex: 0 1 auto; }

.label-carte.plc { background: #f6efe4; }
.plc .plc-svg { max-width: 260px; }

.repere-col { opacity: 0; transition: opacity .25s; }
.stage.geste .repere-col, .stage.repere-on .repere-col { opacity: 1; }
.design .rot-btns { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); display: flex; gap: 4px; }
.design .rot-btns button { min-height: 0; padding: 3px 9px; font-size: .72rem; font-weight: 800; line-height: 1.2; border-radius: 999px; border: 2px solid var(--v8-coral, #e5482c); background: #fff; color: var(--v8-coral, #e5482c); cursor: pointer; }
.design .rot-btns button[aria-pressed="true"] { background: var(--v8-coral, #e5482c); color: #fff; }
@media (hover: hover) { .design:not(:hover):not(:focus-within):not(:active) .rot-btns { opacity: 0; } }
.place-plus { margin-top: 6px; }
.place-plus summary { cursor: pointer; font-size: .8rem; color: var(--muted); }

.ct-form { max-width: 760px; }
.ct-form .seg { margin-bottom: 14px; }
.ct-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ct-champ label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.ct-champ input, .ct-champ select, .ct-champ textarea { width: 100%; box-sizing: border-box; }
.ct-form textarea { min-height: 140px; }
.ct-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-merci { max-width: 560px; }
.ct-form > .note-indic:first-of-type, .ct-form .note-indic { margin: 0 0 12px; }

.promo { margin: 4px 0 12px; }
.promo-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.promo-ligne input { width: 100%; min-width: 0; box-sizing: border-box; text-transform: uppercase; }
.promo-ligne .btn { width: auto; white-space: nowrap; padding-left: 18px; padding-right: 18px; }
.promo-ok { display: block; margin-top: 6px; color: var(--c-green-ink, #1f7a3d); font-weight: 700; }

.refs-chiffre { font-weight: 800; font-size: 1.15rem; margin: 4px 0 6px; color: var(--v8-indigo, #6266a9); }

.dlg-vecto { max-width: 560px; }
.dlg-vecto .coches { margin: 10px 0; }

.exemples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ex-carte { background: #fff; border-radius: 22px; padding: 14px 14px 18px; }
.ex-fig { margin: 0 0 10px; border-radius: 14px; overflow: hidden; line-height: 0; }
.ex-fig svg, .ex-fig img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.ex-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.ex-carte.bien .ex-tag { background: #dff3df; color: #1f6b3a; }
.ex-carte.mal .ex-tag { background: #fde1da; color: #b3321a; }
.ex-carte h3 { margin: 0 0 4px; font-size: 1.02rem; }
.ex-carte p { margin: 0; font-size: .9rem; }

/* ---------- choix acompte ---------- */
fieldset.acompte { border: 0; padding: 0; margin: 14px 0 0; }
fieldset.acompte legend { font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
fieldset.acompte .check.retrait { margin-bottom: 8px; }
fieldset.acompte input[type="radio"] { width: auto; flex: none; padding: 0; margin: 3px 0 0; }

/* ---------- virement : RIB ---------- */
.rib { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 18px; margin: 12px 0; }
.rib p { margin: 4px 0; } .rib .mono { letter-spacing: .04em; word-break: break-all; }

/* ---------- photo de la gamme Stanley/Stella sous le bandeau revendeur ---------- */
.photo-gamme { padding-top: 28px; padding-bottom: 8px; }
.photo-gamme img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: center 30%; border-radius: 28px; }

/* photos d'atelier : paysage, trois par ligne */
.ambiance { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ambiance img { aspect-ratio: 3 / 2; }

/* broderie : photo de l'atelier à gauche, texte à droite */
.duo-inverse { grid-template-columns: 1fr 1fr; }
.photo-atelier { width: 100%; height: auto; display: block; border-radius: 28px; }
/* photos d'atelier : même format paysage même avec width/height dans le HTML */
.ambiance { align-items: start; }
.ambiance img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* « Comment ça marche » : photos d'atelier sous le texte des rubriques sérigraphie et broderie */
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.mosaique img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; display: block; }
.mosaique .m-grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.texte .photo-atelier { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 22px; border-radius: 22px; display: block; }

/* fiche produit : miniatures sous la grande photo */
.vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.vignette { padding: 0; width: calc((100% - 56px) / 8); max-width: 76px; aspect-ratio: 4 / 5; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.vignette:hover { transform: translateY(-2px); }
.vignette[aria-pressed=true] { border-color: var(--v8-ink, #2a1747); }
.vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* miniatures dans le panneau de droite de la fiche produit */
#vignettes-slot .vignettes { justify-content: flex-start; margin: 0 0 12px; }

/* ---------- catalogue sur téléphone : filtres repliés, pastilles sur une ligne ---------- */
.filtres-bascule { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: default; }
@media (max-width: 900px) {
  .filtres { padding: 10px 14px; }
  .filtres-t { margin-bottom: 0; }
  .filtres-bascule { cursor: pointer; flex: 1; text-align: left; padding: 6px 0; }
  .filtres-bascule::after { content: "▾"; margin-left: 8px; display: inline-block; transition: transform .15s; }
  .filtres-bascule[aria-expanded=true]::after { transform: rotate(180deg); }
  .filtres:not(.ouvert) #filtres > :not(.filtres-t) { display: none; }
  .filtres.ouvert .filtres-t { margin-bottom: 8px; }
  .pills { flex-wrap: nowrap; overflow-x: auto; margin: 12px -14px 12px; padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pills::-webkit-scrollbar { display: none; }
  .pills button { flex: none; white-space: nowrap; padding: 8px 16px; }
  .outils { gap: 8px; }
  .cat-titre { font-size: 2rem; }
}