/* Toi sur Toile — direction : une galerie d'art aux murs blancs.
   Les tableaux sont montrés comme le client les reçoit : toiles tendues sur châssis, SANS cadre,
   avec l'épaisseur du châssis visible sur le côté. Cartel de musée sous chaque œuvre, lumière de spot sur le mur du héros. Bodoni Moda (titres, italique pour l'accent) + Albert Sans (texte). */

@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/bodoni-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/fonts/albert.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --wall:#f7f7f4; --wall-2:#ecece7; --paper:#ffffff; --ink:#17201c; --muted:#59645e; --line:#d3d8d0;
  --accent:#1f4d3f; --accent-2:#2b6a56; --accent-ink:#ffffff; --gold:#a9822f; --edge:#55534d; --edge-2:#3c3a35;
  --spot:rgba(255,250,235,.85); --shadow:rgba(20,26,22,.28);
  --ok:#1f7a4d; --warn:#9a5d00; --bad:#b4271a;
  --room-wall:#ebe9e4; --room-wall-hi:#faf9f5; --room-wall-lo:#d6d3cc; --room-light:rgba(255,248,228,.75); --room-glow:rgba(255,236,190,0);
  --room-sofa-hi:#a3ada6; --room-sofa:#848f88; --room-sofa-lo:#5f6a64;
  --room-leaf-hi:#6a9463; --room-leaf:#2c4f30; --room-pot-hi:#ece8e0; --room-pot:#bcb4a7;
  --room-globe-hi:#ffffff; --room-globe:#f2f0eb; --room-globe-lo:#cdc8be;
  --display:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  --body:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px; --gutter:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --wall:#111513; --wall-2:#161b18; --paper:#1b211e; --ink:#e9ede7; --muted:#9ca79f; --line:#2c3430;
  --accent:#8fd1b3; --accent-2:#a9dfc6; --accent-ink:#0c1f17; --gold:#d4ae5c; --edge:#3a3b37; --edge-2:#2a2b28;
  --spot:rgba(255,245,215,.10); --shadow:rgba(0,0,0,.6);
  --ok:#5cc58f; --warn:#f0a93a; --bad:#ff7a6b;
  --room-wall:#3a3832; --room-wall-hi:#4a463e; --room-wall-lo:#262521; --room-light:rgba(255,226,170,.07); --room-glow:rgba(255,206,130,.38);
  --room-sofa-hi:#6c7670; --room-sofa:#515b55; --room-sofa-lo:#333b37;
  --room-leaf-hi:#466a44; --room-leaf:#1d3520; --room-pot-hi:#8f897f; --room-pot:#5c574f;
  --room-globe-hi:#fffbe8; --room-globe:#ffe3a3; --room-globe-lo:#d9a552; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--wall);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.narrow{max-width:760px}
.center{text-align:center}
.section{padding-block:clamp(56px,8vw,104px)}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--wall);padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(44px,7vw,92px)}
h2{font-size:clamp(32px,4.4vw,54px)}
h3{font-size:22px}
h1 em,h2 em{font-style:italic;color:var(--accent)}
.eyebrow{font:600 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:0 0 14px}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:56ch;margin:18px 0 0}
.sec-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head-row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec-lead{color:var(--muted);font-size:17px;margin:16px 0 0;max-width:60ch}
.link-arrow{font-weight:600;text-decoration:none;color:var(--accent);white-space:nowrap}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--body);background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);border-radius:999px;padding:14px 26px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper)}
.btn-light{background:#fff;color:#1f4d3f;border-color:#fff}
.btn-light:hover{background:#f1efe7}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-wide{width:100%;padding:17px 26px;font-size:17px}

/* ---------- En-tête ---------- */
.demo-banner{background:var(--gold);color:#1a140a;text-align:center;font-size:13px;font-weight:600;padding:7px var(--gutter)}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--wall) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:28px;padding-block:14px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:22px;height:27px;color:var(--gold)}
.logo span{font:italic 500 25px/1 var(--display);letter-spacing:-.01em}
.logo small{font:500 12px var(--body);color:var(--muted);margin-left:4px}
.top-nav{display:flex;gap:24px;margin-left:auto}
.top-nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--muted)}
.top-nav a:hover{color:var(--ink)}
.top-link{margin-left:auto;font-weight:500}
@media (max-width:900px){.top-nav{display:none}.top-cta{margin-left:auto}}
@media (max-width:420px){.logo span{font-size:21px}.top-cta{padding:8px 13px;font-size:13px}}

/* ---------- Toile tendue sur châssis (sans cadre) ----------
   Vue légèrement de biais, comme sur une photo prise dans la pièce : la tranche gauche du châssis
   est une vraie face 3D qui prolonge l'image (bords en miroir), l'ombre tombe sur le mur à droite. */
.toile{position:relative;line-height:0;transform-style:preserve-3d;
  transform:perspective(var(--persp,1600px)) translateY(var(--lift,0px)) rotateY(var(--ry,10deg));
  box-shadow:10px 16px 22px -8px var(--shadow),3px 4px 7px -2px var(--shadow);transition:transform .3s,box-shadow .3s}
.toile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.toile-tranche{position:absolute;top:0;left:0;height:100%;width:var(--depth,9px);transform-origin:0 50%;transform:rotateY(90deg);
  background:var(--img) 0 50%/auto 100% no-repeat,var(--edge);filter:brightness(.58) saturate(.9)}
/* léger relief de toile et lumière du spot sur la surface */
.toile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px)}

/* Cartel de musée */
.cartel{margin-top:18px;padding-left:12px;border-left:2px solid var(--gold);display:grid;gap:2px}
.cartel-no{font:600 11px var(--body);letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.cartel-title{font-size:21px;line-height:1.15}
.cartel-meta{margin:0;font-size:13px;color:var(--muted)}
.cartel-price{margin:2px 0 0;font-size:14px;font-weight:600}

/* ---------- Salon : la toile chez le client, à l'échelle ----------
   Tout est mesuré en cm : --k vaut la largeur de la scène divisée par --span (cm visibles).
   La scène montre le mur de 30 cm (assise du canapé) jusqu'à --haut cm. Lumière de fenêtre venant de la gauche. */
.salon{--haut:235;position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:var(--span) / calc(var(--haut) - 30);
  border-radius:var(--r);isolation:isolate;background:var(--room-wall)}
.salon>*{--k:calc(100cqw / var(--span))}
.salon-mur{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(104deg,transparent 4%,var(--room-light) 16%,var(--room-light) 30%,transparent 46%),
  radial-gradient(80% 90% at 0% 0%,var(--room-light),transparent 65%),
  radial-gradient(60% 40% at 50% 100%,rgba(0,0,0,.10),transparent 70%),
  linear-gradient(98deg,var(--room-wall-hi),var(--room-wall) 48%,var(--room-wall-lo))}
.salon-toile{position:absolute;width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
  left:calc(50% + (var(--x) - var(--w) / 2) * var(--k));bottom:calc((var(--y) - 30) * var(--k));
  transition:width .45s ease,height .45s ease,left .45s ease,bottom .45s ease}
.salon .toile{height:100%;--persp:calc(var(--k) * 420);--depth:calc(var(--k) * 3.8);--ry:24deg;
  box-shadow:calc(var(--k) * 3) calc(var(--k) * 4.5) calc(var(--k) * 7) calc(var(--k) * -1) rgba(30,26,20,.34),calc(var(--k) * .8) calc(var(--k) * 1.2) calc(var(--k) * 1.6) rgba(30,26,20,.28)}
.salon .toile img{height:100%;aspect-ratio:auto}
.salon-canape{position:absolute;width:calc(220 * var(--k));height:calc(90 * var(--k));left:calc(50% - 110 * var(--k));bottom:calc(-32 * var(--k));
  filter:drop-shadow(0 calc(var(--k) * -1) calc(var(--k) * 4) rgba(0,0,0,.12))}
.salon-plante{position:absolute;width:calc(80 * var(--k));height:calc(171 * var(--k));left:calc(50% - 148 * var(--k));bottom:calc(-30 * var(--k))}
.salon-suspension{position:absolute;top:0;width:calc(36 * var(--k));height:calc(108 * var(--k));left:calc(50% + 66 * var(--k))}
.salon-lumiere{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(calc(70 * var(--k)) calc(70 * var(--k)) at calc(50% + 84 * var(--k)) calc(96 * var(--k)),var(--room-glow),transparent 70%),
  radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(0,0,0,.12)),
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23g)%27/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;opacity:.7}
.salon-hero{--haut:215;box-shadow:0 30px 60px -40px var(--shadow)}
.salon-hero .salon-suspension{left:calc(50% + 69 * var(--k))}
.salon-produit{border:1px solid var(--line)}
.salon-legende{margin:12px 0 0;font-size:14px;color:var(--muted);text-align:center}
.salon-legende b{color:var(--ink);font-weight:600}
.vue-tabs{display:flex;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;margin:0 auto 14px}
.vue-tabs button{font:500 14px var(--body);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:8px 16px;cursor:pointer}
.vue-tabs button[aria-selected=true]{background:var(--ink);color:var(--wall)}

/* ---------- Recherche ---------- */
.search-ico{width:18px;height:18px;flex:none}
.search{position:relative;max-width:620px;margin-bottom:20px}
.search .search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input#q{border-radius:999px;padding:14px 48px 14px 46px;font-size:17px;background:var(--paper)}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--wall-2);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
input[type=search]::-webkit-search-cancel-button{display:none}
.top-search{position:relative;width:210px;display:flex;align-items:center}
.top-search .search-ico{position:absolute;left:12px;color:var(--muted);pointer-events:none;width:16px;height:16px}
.top-search input#top-q{border-radius:999px;padding:8px 14px 8px 34px;font-size:14px;background:var(--paper)}
.top-search-btn{display:none;width:40px;height:40px;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;margin-left:auto}
.top-search-btn[aria-expanded=true]{background:var(--ink);color:var(--wall);border-color:var(--ink)}
.suggest{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 40px -20px var(--shadow);padding:6px;z-index:30;display:grid;gap:2px}
.suggest a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:6px 8px;border-radius:8px;text-decoration:none}
.suggest a[aria-selected=true],.suggest a:hover{background:var(--wall-2)}
.suggest img{width:38px;height:50px;object-fit:cover;box-shadow:2px 2px 0 var(--edge),4px 5px 8px -3px var(--shadow)}
.suggest b{display:block;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest small{color:var(--muted);font-size:12px}
.suggest .suggest-all{display:block;padding:10px 8px;font-size:14px;font-weight:600;color:var(--accent);border-top:1px solid var(--line);margin-top:4px;border-radius:0}
.suggest p{margin:0;padding:10px 8px;font-size:14px;color:var(--muted)}
@media (max-width:1100px){.top-in{gap:20px}.top-nav{gap:16px}.top-search{width:170px}}
@media (max-width:900px){
  .top-search{display:none}
  .top-search-btn{display:grid}
  .top-cta{margin-left:0}
  .top.is-search-open .top-search{display:flex;position:absolute;left:0;right:0;top:100%;width:auto;padding:10px var(--gutter-r) 12px var(--gutter);background:var(--wall);border-bottom:1px solid var(--line)}
  .top.is-search-open .top-search .search-ico{left:calc(var(--gutter) + 12px)}
  .top.is-search-open .top-search input#top-q{font-size:16px;padding-block:11px}
  .suggest{left:var(--gutter);right:var(--gutter-r);width:auto}
}

/* ---------- Héros : un mur de galerie éclairé ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(38% 52% at 74% 14%,var(--spot),transparent 70%),
  radial-gradient(26% 40% at 92% 30%,var(--spot),transparent 70%),
  radial-gradient(26% 40% at 55% 34%,var(--spot),transparent 70%),
  linear-gradient(var(--wall),var(--wall-2));border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.hero-txt{min-width:0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-facts{list-style:none;padding:0;margin:36px 0 0;display:flex;gap:28px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.hero-facts b{color:var(--ink);font-family:var(--display);font-size:24px;font-weight:600;margin-right:4px;font-variant-numeric:lining-nums}
.hero-wall{min-width:0}
.hero-wall-tags{margin:12px 0 0;text-align:center;font:italic 15px var(--display);color:var(--muted)}
.hero-wall-tags a{text-decoration:none}
.hero-wall-tags a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.hang{position:relative;display:block;text-decoration:none;transition:transform .3s}
.hang:hover{transform:translateY(-4px) rotate(-.3deg)}
.hang-1{grid-column:2;grid-row:1}
.hang-2{grid-column:1;grid-row:1;margin-top:28%}
.hang-3{grid-column:3;grid-row:1;margin-top:12%}
/* Fil d'accroche retiré : toiles posées à plat sur le mur */
.wire{display:none;position:absolute;left:50%;top:-34px;width:46%;height:34px;transform:translateX(-50%);
  background:linear-gradient(to top right,transparent calc(50% - .8px),var(--muted) 50%,transparent calc(50% + .8px)) left/50% 100% no-repeat,
             linear-gradient(to top left,transparent calc(50% - .8px),var(--muted) 50%,transparent calc(50% + .8px)) right/50% 100% no-repeat;opacity:.55}
.wire::before{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--muted);transform:translateX(-50%)}
.hang-tag{display:block;margin-top:12px;font:italic 15px var(--display);color:var(--muted);text-align:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr}.hero-wall{max-width:620px;margin:0 auto;width:100%}}
@media (max-width:520px){.hero-wall-tags{font-size:13px}}

/* ---------- Rail des collections ---------- */
.rail{background:var(--paper);border-bottom:1px solid var(--line)}
.rail-in{display:flex;gap:8px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rail-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--wall)}
.rail-item:hover{border-color:var(--ink)}
.rail-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}

/* ---------- Collections ---------- */
.collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.coll{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.coll:hover{transform:translateY(-3px);box-shadow:0 18px 30px -20px var(--shadow)}
.coll-stack{position:relative;height:230px;background:linear-gradient(150deg,var(--c1),var(--c0));overflow:hidden}
.st{position:absolute;width:31%;bottom:-12%;box-shadow:2px 2px 0 #2a2925,4px 4px 0 #1d1c19,12px 16px 22px rgba(0,0,0,.4);transition:transform .3s}
.st-1{left:9%;transform:rotate(-8deg)}
.st-2{left:34.5%;bottom:-4%;z-index:2;transform:rotate(1deg)}
.st-3{left:60%;transform:rotate(7deg)}
.coll:hover .st-1{transform:rotate(-11deg) translateY(-6px)}
.coll:hover .st-3{transform:rotate(10deg) translateY(-6px)}
.coll:hover .st-2{transform:translateY(-10px)}
.coll-txt{padding:20px 22px 22px;display:grid;gap:4px}
.coll-txt h3{font-size:24px}
.coll-txt p{margin:0;color:var(--muted);font-size:15px}
.coll-count{margin-top:8px;font-size:14px;font-weight:600;color:var(--accent)}
@media (max-width:900px){.collections{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.collections{grid-template-columns:1fr}.coll-stack{height:200px}}

/* ---------- Grilles d'œuvres ---------- */
.best{background:var(--paper);border-block:1px solid var(--line)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:48px 30px}
.gallery-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gallery-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.gallery-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.gallery-grid-4,.gallery-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}.cartel-title{font-size:17px}}
.piece{position:relative;min-width:0}
.piece-link{display:block;text-decoration:none}
.piece-link:hover .toile{--lift:-5px;--ry:6deg;box-shadow:16px 28px 32px -12px var(--shadow),3px 4px 7px -2px var(--shadow)}
.piece-link:hover .cartel-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.badge{position:absolute;z-index:2;top:-10px;left:-8px;background:var(--gold);color:#1a140a;font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:0 4px 10px -4px var(--shadow)}
.badge-new{background:var(--accent);color:var(--accent-ink)}

/* ---------- Filtres ---------- */
.catalogue.is-standalone{padding-top:48px}
.filters{display:grid;gap:14px;margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer}
.chip small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--wall);border-color:var(--ink)}
.chip.is-on small{color:inherit;opacity:.7}
.filters-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px}
.seg .chip{border:0;background:transparent;padding:7px 14px}
.seg .chip.is-on{background:var(--accent);color:var(--accent-ink)}
.select{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--muted)}
.select select{font:500 14px var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 34px 9px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.result-count{color:var(--muted);font-size:14px;margin:0 0 28px}
.empty{color:var(--muted);text-align:center;padding:40px 0}

/* ---------- Étapes ---------- */
.how{background:var(--wall)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.steps li{display:grid;gap:8px;align-content:start;padding-top:20px;border-top:1px solid var(--line)}
.step-n{font:italic 500 54px/1 var(--display);color:var(--gold)}
.steps h3{font-size:22px}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* ---------- Occasions ---------- */
.occasions{background:var(--paper);border-block:1px solid var(--line)}
.occ-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.occ{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;padding:26px 24px;background:var(--wall);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,transform .15s}
.occ:hover{border-color:var(--accent);transform:translateY(-2px)}
.occ-name{font:italic 500 clamp(22px,2.4vw,30px)/1.1 var(--display)}
.occ-n{font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:760px){.occasions{background:var(--paper);border-block:1px solid var(--line)}
.occ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.occasions{background:var(--paper);border-block:1px solid var(--line)}
.occ-grid{grid-template-columns:1fr}}

/* ---------- Formats ---------- */
.formats{background:var(--paper);border-block:1px solid var(--line)}
.formats-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.price-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;max-width:440px}
.price-list li{display:flex;align-items:baseline;gap:10px;font-size:18px}
.price-list .dots{flex:1;border-bottom:1px dotted var(--muted);transform:translateY(-5px)}
.price-list b{font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.scale-fig{margin:0}
.scale{width:100%;height:auto;display:block}
.sc-canvas{fill:var(--line)}
.sc-edge{fill:var(--edge)}
.sc-label{font:600 12px var(--body);fill:var(--muted)}
.sc-sofa rect{fill:var(--line)}
.sc-sofa .sc-seat{fill:color-mix(in srgb,var(--line) 70%,var(--muted))}
.sc-sofa .sc-arm{fill:color-mix(in srgb,var(--line) 55%,var(--muted))}
.sc-note{font:italic 14px var(--display);fill:var(--ink)}
.scale-fig figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
@media (max-width:860px){.formats-in{grid-template-columns:1fr}}

/* ---------- Promesses ---------- */
.promise{padding-block:44px;border-bottom:1px solid var(--line)}
.promise-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.promise h3{font-size:19px;margin-bottom:4px}
.promise p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:820px){.promise-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- FAQ ---------- */
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
.faq-list details{border-top:1px solid var(--line);padding-block:18px}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:400 24px/1 var(--display);color:var(--gold)}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:10px 0 0;color:var(--muted);max-width:62ch}
@media (max-width:820px){.faq-in{grid-template-columns:1fr}}

/* ---------- Appel final ---------- */
.final-cta{background:#1f4d3f;color:#fff;background-image:radial-gradient(60% 120% at 80% 0%,rgba(255,240,200,.16),transparent 60%)}
.final-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.final-cta h2{color:#fff;max-width:16ch}
.final-cta h2 em{color:#e3c47f}

/* ---------- Page modèle ---------- */
.product{padding-top:28px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.product-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.product-visual{position:sticky;top:96px}
.product-wall{--edge:#55534d;--edge-2:#3c3a35;--shadow:rgba(20,26,22,.3);padding:clamp(32px,6vw,64px);border-radius:var(--r);background:radial-gradient(60% 50% at 50% 0%,rgba(255,250,235,.9),transparent 70%),linear-gradient(#f4f4f0,#e9e9e4);border:1px solid var(--line)}
.toile-lg{max-width:420px;margin:0 auto}
.avant-apres{margin:0 auto;max-width:480px}
.avant-apres img{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 18px 40px -24px var(--shadow)}
.product-visual .avant-apres{margin-top:24px}
.apercu-ok,.apercu-retouche{display:grid;gap:10px}
.apercu-retouche{padding-top:18px;border-top:1px solid var(--line)}
.apercu-retouche textarea{width:100%}
.product-visual .cartel{max-width:440px;margin:20px auto 0}
.mini-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.mini-ba figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px}
.mini-ba img{aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.order-form{display:grid;gap:22px;min-width:0}
.order-form h1{font-size:clamp(40px,5vw,64px)}
.order-form .lead{margin-top:0}
fieldset{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:18px 20px 20px;margin:0;display:grid;gap:10px;min-width:0}
legend{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;padding:0 6px}
legend small{font-weight:400;color:var(--muted)}
.leg-n{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 13px var(--body)}
label{font-weight:500;font-size:14px}
input:not([type=radio]):not([type=checkbox]):not([type=file]),textarea,select{width:100%;font:16px var(--body);color:var(--ink);background:var(--wall);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two>div{display:grid;gap:6px;min-width:0}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.fmt-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fmt-opt{position:relative;cursor:pointer}
.fmt-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fmt-opt span{display:grid;gap:2px;border:1.5px solid var(--line);border-radius:10px;padding:14px;background:var(--wall);height:100%}
.fmt-opt b{font-weight:600}
.fmt-opt small{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.fmt-opt em{font-style:normal;font-size:11px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.fmt-opt input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--paper)}
.fmt-opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:420px){.fmt-pick{grid-template-columns:1fr}}
/* Nombre de visages / animaux demandés par le tableau */
.besoin{display:flex;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:14px 16px}
.besoin p{margin:0;font-size:15px;color:var(--muted)}
.besoin b{color:var(--ink);font-weight:600}
.besoin-ico{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 19px var(--body);font-variant-numeric:tabular-nums}
/* Une case photo par personne, avec sa place sur le tableau */
.slots{display:grid;gap:8px}
.slots[hidden]{display:none}
.slot{position:relative;display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--wall);cursor:pointer}
.slot:hover,.slot:focus-within{border-color:var(--accent)}
.slot.is-done{border-style:solid;border-color:var(--accent);background:var(--paper)}
.slot-n{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 14px var(--body)}
.slot-txt{display:grid;gap:1px;min-width:0;flex:1}
.slot-txt b{font-weight:600;font-size:15px}
.slot-txt small{font-size:13px;color:var(--muted)}
.slot-pick{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;color:var(--accent);overflow:hidden}
.slot-pick img{width:100%;height:100%;object-fit:cover}
.ajouts{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ajouts-titre{margin:0;font-size:14px;color:var(--muted)}
.ajouts-titre b{color:var(--ink)}
.ajout{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.ajout[hidden],.ajouts [hidden]{display:none}
.ajout .slot{border-style:dashed}
.ajout [data-ajout-retirer]{justify-self:start}
.modif-type{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600}
.modif-type label{display:flex;gap:6px;align-items:center;cursor:pointer}
.modif-part{display:grid;gap:6px}
.modif-part[hidden]{display:none}
.slot.is-retire{opacity:.55}
.slot.is-retire .slot-txt b{text-decoration:line-through}
.ajouts [data-ajout-plus]{justify-self:start}
.option-accroche{margin-top:12px}
.option-accroche span{display:grid;gap:2px}
.option-accroche small{font-size:13px;color:var(--muted)}
.offre-noel{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--accent)}
.offre-noel small{font-weight:400;color:var(--muted)}
.paiement-note{display:flex;gap:14px;align-items:flex-start;margin:20px 0 12px;padding:16px 18px;border:2px solid var(--accent);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.paiement-note svg{flex:none;color:var(--accent);margin-top:2px}
.paiement-note p{margin:0;font-size:15px;line-height:1.5}
.paiement-note .paiement-note-titre{font:600 clamp(20px,5vw,24px)/1.2 var(--display);color:var(--accent);margin-bottom:4px}
.paiement-tag{display:flex;gap:8px;align-items:center;margin:0 0 14px;padding:8px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:14px;width:fit-content;max-width:100%}
.paiement-tag svg{flex:none}
.photo-conseil{margin:0 0 14px;padding:14px 16px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold)}
.photo-conseil-titre{margin:0 0 6px;font-weight:600;font-size:15px}
.photo-conseil ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.45}
.promo-banner{background:var(--accent);color:var(--accent-ink);text-align:center;font-size:13px;font-weight:600;padding:7px var(--gutter)}
.slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
/* Choix de la version de la scène */
.var-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.var-opt{position:relative;cursor:pointer}
.var-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.var-opt span{display:grid;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:6px 6px 10px;background:var(--wall);height:100%}
.var-opt img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.var-opt small{font-size:13px;line-height:1.3;color:var(--muted);padding:0 4px}
.var-opt input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--paper)}
.var-opt input:checked+span small{color:var(--ink);font-weight:600}
.var-opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.file{display:grid;justify-items:center;gap:4px;border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;cursor:pointer;background:var(--wall);position:relative}
.file:hover{border-color:var(--accent)}
.file-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:24px;line-height:1}
.file small{color:var(--muted);font-weight:400}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.previews{display:flex;gap:10px;flex-wrap:wrap}
.previews img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--muted)}
.check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.hint{font-size:13px;color:var(--muted);margin:0}
.reassure{list-style:none;padding:0;margin:-6px 0 0;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
.reassure li::before{content:"✓ ";color:var(--accent);font-weight:700}
.err{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border:1px solid var(--bad);border-radius:10px;padding:12px 14px;margin:0;font-weight:600}
.flash{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border:1px solid var(--ok);border-radius:10px;padding:10px 14px;font-weight:600}
.related{background:var(--paper);border-top:1px solid var(--line)}
@media (max-width:900px){.product-in{grid-template-columns:1fr}.product-visual{position:static}}

/* Merci */
.thanks .thanks-art{max-width:200px;margin:0 auto 40px}
.thanks .lead{margin:18px auto 28px}

/* ---------- Pages légales ---------- */
.prose h1{font-size:clamp(36px,5vw,56px);margin-bottom:24px}
.prose h2{font-family:var(--body);font-weight:700;font-size:19px;letter-spacing:0;margin-top:1.8em}
.prose p{max-width:68ch}
mark{background:var(--gold);color:#1a140a;padding:0 4px;border-radius:3px}

/* ---------- Pied de page ---------- */
.foot{background:var(--paper);border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding-block:52px 28px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:34ch;margin:14px 0 0}
.foot nav{display:grid;gap:8px;align-content:start;font-size:14px}
.foot nav h2{font:600 12px var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}
.foot nav a{text-decoration:none;overflow-wrap:anywhere}
.foot nav a:hover{text-decoration:underline}
.foot-base{border-top:1px solid var(--line);padding-block:18px;font-size:13px;color:var(--muted)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- Back-office ---------- */
.admin{background:var(--paper)}
.admin h1{font-family:var(--body);font-weight:700;font-size:28px;letter-spacing:0}
.admin h2{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:0}
.admin .section{padding-block:28px}
.admin-head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--wall)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill-payee,.pill-retouche{color:var(--bad)}
.pill-apercu_envoye{color:var(--muted)}
.pill-apercu_valide{color:var(--warn)}
.pill-fichier_pret{color:var(--warn)}
.pill-envoyee_imprimeur,.pill-expediee{color:var(--ok)}
.pill-en_attente_paiement,.pill-annulee{color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--wall);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px;align-content:start;min-width:0}
dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;margin:0;font-size:14px}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere}
.admin-photos{display:flex;gap:10px;flex-wrap:wrap}
.admin-link{margin-left:auto}
.rendus{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:16px}
.rendu img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.rendu h2{margin:0}
.rendus-titre{margin-top:36px}
.rendu .inline-form input{flex:1;min-width:0;font-size:14px;padding:9px 12px}
.rendu-refuse img{opacity:.75}
.admin-nav{border-bottom:1px solid var(--line);background:var(--paper)}
.admin-nav-in{display:flex;flex-wrap:wrap;gap:6px 28px;padding-top:10px;padding-bottom:10px}
.admin-nav-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.admin-nav-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:6px}
.admin-nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:15px}
.admin-nav a:hover{background:var(--wall)}
.admin-nav a[aria-current="page"]{background:var(--ink);color:var(--paper);font-weight:600}
.ordre{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:16px}
.ordre-item{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:10px;cursor:pointer}
.ordre-item img{width:60px;height:80px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.ordre-item select{font-size:14px;padding:8px}
.ordre-best{grid-column:3;display:flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.ordre-top{border-color:var(--gold)}
.ordre-save{position:sticky;bottom:0;padding:14px 0;background:var(--wall);margin:0}
.admin-photos img{width:140px;height:140px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.admin-photos figure{margin:0;width:140px}
.admin-photos figcaption{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.admin-photos figcaption b{color:var(--ink)}
.final{max-height:320px;width:auto;border-radius:8px;border:1px solid var(--line)}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form input[type=file]{font-size:14px;max-width:100%}
.inline-form select{width:auto;flex:1;min-width:0}
.rendu-refaire{display:grid;gap:8px}
.validations{display:grid;gap:18px;margin-top:16px}
.validation-head h2{margin:0}
.validation-head .hint{margin-top:4px}
.validation-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.validation-in h3{font:700 15px var(--body);margin:0 0 10px}
.validation-in .final{max-height:none;width:100%;height:auto}
@media (max-width:720px){.validation-in{grid-template-columns:1fr}}
.rendu-refaire textarea{width:100%;font-size:14px}
.manuel summary{cursor:pointer;font-size:14px;color:var(--muted)}
.manuel[open] summary{margin-bottom:10px}
@media (max-width:820px){.admin-grid{grid-template-columns:1fr}}