/* L'AVANT — boutique. Dérivé de .claude/creative/DESIGN.md (direction « LA BOUTIQUE », 07/09). */
:root{
  --creme:#f6f1e7; --papier:#fbf8f2; --encre:#15130f; --encre-60:rgba(21,19,15,.62); --encre-12:rgba(21,19,15,.12); --encre-6:rgba(21,19,15,.06);
  --or:#c9a660; --vert:#2f6b4a; --nuit:#12192b; --lait:#f6f1e7;
  --serif:"Fraunces","Georgia",serif; --sans:"Inter",system-ui,sans-serif;
  --t96:clamp(40px,5.6vw,80px); --t56:clamp(30px,4vw,56px); --t32:clamp(24px,2.4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1); --gout:20px; --sec:56px; --ent:64px;
}
@media (min-width:900px){:root{--gout:48px;--sec:96px;--ent:72px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--sans);font-size:16px;line-height:1.55;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;line-height:.95;margin:0 0 .4em;font-variation-settings:"opsz" 144,"SOFT" 40}
h1{font-size:var(--t96)} h2{font-size:var(--t56)} h3{font-size:var(--t32)}
h2 em,h1 em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100;color:var(--or)}
p{margin:0 0 1em;max-width:62ch}
.prix{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 48;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.etq{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.sec{font-size:14px;color:var(--encre-60)}
.cont{padding:0 var(--gout);max-width:1360px;margin:0 auto}
section{padding:var(--sec) 0}
section.cont{padding:var(--sec) var(--gout)}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.tete h2{margin:0}
.lien{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--or);padding-bottom:4px;white-space:nowrap}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* En-tête */
.mention{font-size:12px;color:var(--encre-60);padding:7px var(--gout);text-align:center;border-bottom:1px solid var(--encre-12);background:var(--papier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention .court{display:none}@media (max-width:719px){.mention .long{display:none}.mention .court{display:inline}}
.ent{display:flex;align-items:center;justify-content:space-between;height:var(--ent);padding:0 var(--gout);position:sticky;top:0;z-index:20;background:rgba(246,241,231,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--encre-12)}
.ent .logo{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;text-decoration:none;font-weight:500}
.ent nav{display:flex;gap:26px;align-items:center}
.ent nav a{text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;padding:6px 0;border-bottom:1px solid transparent}
.ent nav a.act{border-color:var(--encre)}
.ent .pan{display:inline-flex;align-items:center;gap:8px}
.ent .pan b{font-family:var(--serif);font-weight:400;font-size:17px;min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--encre);color:var(--creme)}
@media (max-width:719px){.ent nav{gap:16px}.ent nav a:not(.pan):not([href='catalogue.html']){display:none}.ent .logo{font-size:22px}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border:1px solid var(--encre);background:var(--encre);color:var(--creme);font:500 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s;border-radius:0;white-space:nowrap}
.btn:hover{background:var(--creme);color:var(--encre)}
.btn.sec2{background:transparent;color:var(--encre)} .btn.sec2:hover{background:var(--encre);color:var(--creme)}
.btn.petit{height:44px;padding:0 16px;font-size:12px}
.btn.ok,.btn.sec2.ok{background:var(--vert);border-color:var(--vert);color:#fff}
.ent .pan b.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
@media (max-width:719px){.carte .btn.petit{height:44px;padding:0 14px;font-size:12px;flex:1 1 auto}.coche{font-size:11px;min-height:44px}}
.btn[disabled]{opacity:.4;pointer-events:none}
.txtbtn{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:var(--encre-60);cursor:pointer;padding:0;min-height:44px;display:inline-flex;align-items:center}
.txtbtn:hover{color:var(--encre)}

/* Carte produit */
.cartes{display:grid;gap:32px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.cartes{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}}
.cartes.cinq{grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 calc(-1 * var(--gout));padding-left:var(--gout);padding-right:var(--gout);scrollbar-width:none}
.cartes.cinq::-webkit-scrollbar{display:none}
.cartes.cinq .carte{scroll-snap-align:start;min-width:200px}
@media (min-width:1100px){.cartes.cinq{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin:0;padding:0}}
.carte{position:relative;display:flex;flex-direction:column;gap:14px;--teinte:color-mix(in oklab,var(--porte,#bbb) 10%,var(--papier))}
.carte-img{position:relative;display:block;aspect-ratio:4/5;background:var(--teinte);overflow:hidden;text-decoration:none;transition:background .3s}
.carte-img img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;transition:transform .6s var(--ease);filter:drop-shadow(0 12px 18px rgba(21,19,15,.14))}
.carte-img.scene img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.carte:hover .carte-img img{transform:scale(1.04) translateY(-4px)}
.carte:hover .carte-img{background:color-mix(in oklab,var(--porte,#bbb) 16%,var(--papier))}
.carte .badge{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(251,248,242,.9);color:var(--encre-60);padding:5px 8px;z-index:2}
.carte-txt{display:grid;gap:4px;align-content:start}
.carte-txt .etq{color:var(--encre-60)}
.carte-txt .nom{font-family:var(--serif);font-size:21px;letter-spacing:-.02em;line-height:1.1;text-decoration:none;font-variation-settings:"opsz" 48,"SOFT" 40;min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-txt .nom:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.carte-txt .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px;flex-wrap:wrap}
.carte-txt .prix{font-size:22px}
.carte-act{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;flex-wrap:wrap}
.coche{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-60);cursor:pointer;user-select:none;min-height:44px;padding:0 4px}
.coche input{accent-color:var(--encre);width:18px;height:18px;margin:0}
.coche:has(input:checked){color:var(--encre)}
.carte.masquee{display:none}

/* Accueil */
.hero{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);align-items:center;padding:36px var(--gout) 24px;position:relative;overflow:hidden}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding:40px var(--gout) 40px;min-height:calc(100svh - var(--ent))}}
.hero h1{max-width:14ch;margin-bottom:.5em}
.hero .sous{font-size:18px;color:var(--encre-60);max-width:46ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* La vitrine : neuf coffrets en nature morte, profondeur par taille, rotation et ombre */
.vitrine{position:relative;aspect-ratio:1/1;max-height:82svh;margin:0 auto;width:100%;--mx:0;--my:0}
.vitrine::before{content:"";position:absolute;inset:-8% -10%;background:radial-gradient(closest-side,rgba(201,166,96,.22),rgba(201,166,96,0) 72%);pointer-events:none}
.piece{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:3/4;z-index:var(--z);text-decoration:none;
  transform:translate(calc(var(--mx) * var(--p) * 18px),calc(var(--my) * var(--p) * 12px)) rotate(var(--r));
  transition:transform .6s var(--ease),z-index 0s .3s;animation:piece-in 1.1s var(--ease) backwards;animation-delay:var(--d)}
.piece img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(10px + var(--p) * 22px) calc(14px + var(--p) * 22px) rgba(21,19,15,calc(.14 + var(--p) * .1)));transition:transform .6s var(--ease)}
.piece .tag{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,6px);white-space:nowrap;background:var(--encre);color:var(--creme);font-size:12px;letter-spacing:.02em;padding:6px 10px;opacity:0;transition:opacity .25s var(--ease),transform .35s var(--ease);pointer-events:none}
.piece .tag b{font-family:var(--serif);font-weight:500;font-size:14px;margin-right:8px}
.piece:hover,.piece:focus-visible{z-index:20;transition-delay:0s}
.piece:hover img,.piece:focus-visible img{transform:scale(1.07) rotate(calc(var(--r) * -1))}
.piece:hover .tag,.piece:focus-visible .tag{opacity:1;transform:translate(-50%,0)}
.vitrine .leg{position:absolute;left:0;bottom:-8px;font-size:12px;color:var(--encre-60);letter-spacing:.06em;text-transform:uppercase}
@keyframes piece-in{from{opacity:0;transform:translate(0,48px) rotate(var(--r)) scale(.92)}to{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(1)}}
@media (max-width:899px){.vitrine{order:-1;max-height:none;aspect-ratio:1/.82;margin-bottom:8px}.vitrine .leg{display:none}}
.reassurance{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--encre-12);border-bottom:1px solid var(--encre-12);font-size:13px}
@media (min-width:900px){.reassurance{grid-template-columns:repeat(4,1fr)}}
.reassurance div{padding:18px var(--gout);display:grid;gap:2px;border-right:1px solid var(--encre-12)}
.reassurance div:last-child{border-right:0}
.reassurance b{font-weight:500}
.reassurance span{color:var(--encre-60)}
.tuiles{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tuile{display:grid;gap:8px;padding:24px;min-width:0;overflow-wrap:anywhere;text-decoration:none;background:var(--papier);border:1px solid var(--encre-12);min-height:150px;align-content:end;transition:border-color .2s}
.tuile:hover{border-color:var(--encre)}
.tuile b{font-family:var(--serif);font-weight:500;font-size:clamp(20px,5.5vw,28px);letter-spacing:-.03em;line-height:1.05}
.tuile span{font-size:13px;color:var(--encre-60)}
.trois{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:720px){.trois{grid-template-columns:repeat(3,1fr)}}
.trois h3{font-size:26px}
.trois .n{font-family:var(--serif);font-size:44px;color:var(--or);line-height:1;margin-bottom:14px}
.dates{list-style:none;padding:0;margin:0;border-top:1px solid var(--encre-12)}
.dates li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--encre-12);align-items:baseline;font-size:15px}
.dates .d{font-family:var(--serif);font-size:20px;letter-spacing:-.02em}
.deuxcol{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.deuxcol{grid-template-columns:.9fr 1.1fr;align-items:start}}

/* Catalogue */
.catalogue{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.catalogue{grid-template-columns:240px minmax(0,1fr);gap:56px}}
.catalogue>div{min-width:0}
@media (min-width:900px){.filtres{position:sticky;top:calc(var(--ent) + 24px);align-self:start}}
@media (max-width:899px){.filtres details{border:1px solid var(--encre-12);padding:14px 16px;background:var(--papier)}.filtres summary{padding:0}.filtres summary::after{content:"+";color:var(--or);font-size:28px;line-height:1}.filtres details[open] summary{padding-bottom:8px}.filtres details[open] summary::after{content:"–"}}
.filtres details{border:0}
.filtres summary{font-family:var(--serif);font-size:24px;letter-spacing:-.02em;padding:0 0 16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.filtres summary::after{content:"";}
.filtres summary .nbactif{font:500 12px var(--sans);letter-spacing:.1em;color:var(--creme);background:var(--encre);border-radius:12px;padding:3px 9px;margin-left:10px;vertical-align:middle}.filtres summary .nbactif:empty{display:none}
@media (min-width:900px){.filtres summary{pointer-events:none}.filtres details{display:block}.filtres details>div{display:block!important}}
.groupe{border-top:1px solid var(--encre-12);padding:18px 0}
.groupe .etq{display:block;margin-bottom:12px;color:var(--encre-60)}
.groupe label{display:flex;align-items:center;gap:12px;padding:6px 0;min-height:44px;font-size:15px;cursor:pointer}
.groupe label input{accent-color:var(--encre);width:18px;height:18px;margin:0}
.groupe label:has(input:checked){font-weight:500}
.groupe label small{margin-left:auto;color:var(--encre-60);font-size:13px}
.barre-cat{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--encre-12)}
.barre-cat .n{font-family:var(--serif);font-size:24px;letter-spacing:-.02em}
.barre-cat .n small{font-family:var(--sans);font-size:14px;color:var(--encre-60);letter-spacing:0;margin-left:10px}
.barre-cat select{height:40px;border:1px solid var(--encre-12);background:var(--papier);padding:0 12px;font:500 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--encre);border-radius:0}
.actifs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.actifs button{border:1px solid var(--encre-12);background:var(--papier);font:500 12px var(--sans);letter-spacing:.06em;padding:8px 12px;cursor:pointer;color:var(--encre);border-radius:0}
.actifs button::after{content:" ×";color:var(--encre-60)}
.vide-filtre{padding:64px 0;text-align:center;color:var(--encre-60)}

/* Fiche */
.fil{font-size:12px;letter-spacing:.06em;color:var(--encre-60);padding:20px var(--gout) 0}
.fil a{display:inline-block;padding:6px 0}
.fil a{text-decoration:none}.fil a:hover{color:var(--encre)}
.fiche{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);padding:20px var(--gout) var(--sec)}
@media (min-width:900px){.fiche{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:72px;align-items:start}}
@media (min-width:1200px){.fiche{gap:96px}}
.galerie{position:sticky;top:calc(var(--ent) + 24px);display:grid;gap:12px}
@media (max-width:899px){.galerie{position:static}}
.galerie .visu{position:relative;aspect-ratio:4/5;background:var(--teinte);overflow:hidden;display:flex;align-items:center;justify-content:center}
.galerie .visu img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(21,19,15,.18))}
.galerie .visu.scene img{width:100%;height:100%;object-fit:cover;filter:none}
.vignettes{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.vignettes button{flex:0 0 auto;width:72px;background:var(--teinte);border:1px solid transparent;padding:0;cursor:pointer;display:grid;gap:4px;font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-60)}
.vignettes button img{width:72px;height:auto;aspect-ratio:3/4;object-fit:contain;display:block}
.vignettes button.on{border-color:var(--encre);color:var(--encre)}
.vignettes button:hover{border-color:var(--encre-12)}
.galerie .visu-note{margin:10px 2px 0;font-size:12px;color:var(--encre-60)}
.galerie .visu .badge{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(251,248,242,.9);color:var(--encre-60);padding:6px 9px}
.faits{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--encre-12);background:var(--papier)}
@media (min-width:600px){.faits{grid-template-columns:repeat(4,1fr)}}
.faits div{padding:16px 18px;border-right:1px solid var(--encre-12);display:grid;gap:4px}
.faits div:last-child{border-right:0}
@media (max-width:599px){.faits div:nth-child(2n){border-right:0}.faits div:nth-child(-n+2){border-bottom:1px solid var(--encre-12)}}
.faits .v{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.faits .v.nc{color:var(--encre-60);font-size:20px;padding-top:6px}
.faits .e{font-size:12px;color:var(--encre-60);letter-spacing:.1em;text-transform:uppercase}
.achat{display:grid;gap:22px}
.achat .marque{color:var(--encre-60);text-decoration:none}
.achat h1{font-size:var(--t56);margin:8px 0 0;max-width:16ch}
.achat .accroche{font-size:18px;color:var(--encre-60);margin:0}
.achat .prixligne{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.achat .prixligne .prix{font-size:40px;line-height:1}
.achat .prixligne small{font-size:13px;color:var(--encre-60)}
.dispo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.dispo::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vert);flex:none;box-shadow:0 0 0 3px rgba(47,107,74,.18)}
.dispo span{color:var(--encre-60);font-weight:400}
.achat fieldset{border:0;padding:0;margin:0}
.achat legend{margin-bottom:10px}
.radio{display:grid;gap:8px}
.radio label{display:flex;gap:12px;align-items:center;border:1px solid var(--encre-12);padding:14px 16px;cursor:pointer;font-size:15px;background:var(--papier);transition:border-color .2s}
.radio label:has(input:checked){border-color:var(--encre)}
.radio input{accent-color:var(--encre);margin:0}
.radio .sup{margin-left:auto;color:var(--encre-60);font-size:14px}
.qte{display:inline-flex;border:1px solid var(--encre-12);align-items:center;height:54px;background:var(--papier)}
.qte button{width:48px;height:100%;background:none;border:0;font-size:20px;cursor:pointer;color:inherit}
.qte span{min-width:36px;text-align:center;font-variant-numeric:tabular-nums;font-weight:500}
.ajout{display:grid;grid-template-columns:auto 1fr;gap:10px}
.ajout .btn{width:100%}
.liens-fiche{display:flex;gap:20px;flex-wrap:wrap}
.reass{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px;color:var(--encre-60);border-top:1px solid var(--encre-12);padding-top:18px}
.reass li{display:flex;gap:10px}
.reass li::before{content:"—";color:var(--or)}
.accord{border-top:1px solid var(--encre-12)}
.accord details{border-bottom:1px solid var(--encre-12)}
.accord summary{cursor:pointer;padding:18px 0;font-family:var(--serif);font-size:22px;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px;font-variation-settings:"opsz" 48}
.accord summary::-webkit-details-marker{display:none}
.accord summary::after{content:"+";color:var(--or);font-size:26px;line-height:1;font-family:var(--sans)}
.accord details[open] summary::after{content:"–"}
.accord .corps{padding:0 0 22px;font-size:15px}
.accord .corps p{max-width:52ch}
.connus{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.connus li{display:flex;gap:10px;font-size:15px}.connus li::before{content:"•";color:var(--porte);font-weight:700}
.barres{display:grid;gap:12px;margin:8px 0 14px}
.barre{display:grid;grid-template-columns:120px 1fr 90px;align-items:center;gap:12px;font-size:14px}
.barre i{display:block;height:20px;background:var(--encre-12);transform-origin:left}
.barre.or i{background:var(--or)}
.barre .prix{font-size:18px;text-align:right}
.ratio{font-family:var(--serif);font-size:34px;letter-spacing:-.03em;line-height:1;margin:6px 0 10px}
.ratio small{font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--encre-60);margin-left:10px}
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th,.tab td{text-align:left;padding:10px 0;border-bottom:1px solid var(--encre-6);vertical-align:top}
.tab tr:last-child th,.tab tr:last-child td{border-bottom:0}
.tab th{font-weight:500;width:38%;color:var(--encre-60)}
.faq{display:grid;gap:14px}
.faq b{display:block;font-weight:500;margin-bottom:2px}
.achat-mobile{display:none}
@media (max-width:899px){
  .achat-mobile{position:sticky;bottom:0;z-index:15;min-height:72px;background:var(--papier);padding:12px var(--gout);border-top:1px solid var(--encre-12);display:flex;justify-content:space-between;align-items:center;gap:16px}
  .achat-mobile .prix{font-size:26px}
}

/* Comparateur */
.compare{display:grid;gap:1px;background:var(--encre-12);border:1px solid var(--encre-12);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.compare .col{scroll-snap-align:start;background:var(--creme);min-width:220px;display:grid;grid-template-rows:auto 1fr auto;padding-bottom:24px}
.compare .col .fond{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in oklab,var(--porte,#bbb) 10%,var(--papier))}
.compare .col .fond img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(21,19,15,.14))}
.compare .col dl{margin:0;padding:0 20px}
.compare .col dt{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--encre-60);margin-top:14px}
.compare .col dd{margin:2px 0 0;font-family:var(--serif);font-size:28px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.compare .col dl>dd:first-of-type{min-height:52px}
.compare .col dd.t{font-family:var(--sans);font-size:14px;letter-spacing:0;line-height:1.4}
.compare .col .act{padding:24px 20px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.compare-indice{display:none;font-size:12px;color:var(--encre-60);letter-spacing:.06em;text-transform:uppercase;margin:10px 0 0}
@media (max-width:719px){.compare .col{min-width:min(78vw,300px)}.compare-indice{display:block}}
.barre-compar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--encre);color:var(--creme);display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gout);font-size:14px}
.barre-compar.on{display:flex}
.barre-compar .vider{background:none;border:0;color:var(--creme);opacity:.7;font-size:22px;line-height:1;cursor:pointer;padding:8px;margin-left:-8px}
@media (max-width:899px){body.page-fiche .barre-compar{bottom:var(--achat-h,72px)}}
.barre-compar .btn{height:40px;padding:0 18px;border-color:var(--creme);background:var(--creme);color:var(--encre)}
.vide{padding:var(--sec) 0}

/* Panier */
.panier{display:grid;gap:48px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.panier{grid-template-columns:1.4fr .8fr;align-items:start}}
.lignes{list-style:none;margin:0;padding:0;border-top:1px solid var(--encre-12)}
.lignes li{display:grid;grid-template-columns:88px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--encre-12)}
.lignes .mini{width:88px;aspect-ratio:4/5;background:color-mix(in oklab,var(--porte,#bbb) 10%,var(--papier));display:flex;align-items:center;justify-content:center;padding:8px}
.lignes .mini img{max-height:100%;object-fit:contain}
.lignes .nom{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;line-height:1.05}
.lignes .nom small{display:block;font:400 13px var(--sans);color:var(--encre-60);margin-top:6px;letter-spacing:0}
.lignes .qte{height:40px}.lignes .qte button{width:38px}
.lignes .droite{text-align:right;display:grid;gap:10px;justify-items:end}
.lignes .droite .prix{font-size:22px}
.recap{position:sticky;top:calc(var(--ent) + 24px);border-top:1px solid var(--encre);padding-top:20px}
.recap .l{display:flex;justify-content:space-between;padding:10px 0;font-size:15px;border-bottom:1px solid var(--encre-12)}
.recap .total{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0}
.recap .total .prix{font-size:var(--t56);line-height:1}
.recap .btn{width:100%}
.recap .note{font-size:13px;color:var(--encre-60);margin-top:14px}

/* Tunnel */
.stepper{display:flex;gap:0;border-bottom:1px solid var(--encre-12);margin-bottom:40px}
.stepper span{padding:16px 0;margin-right:32px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--encre-60);border-bottom:2px solid transparent;margin-bottom:-1px}
.stepper span.on{color:var(--encre);border-color:var(--or)}
.stepper span.ok{color:var(--encre)}
.etape{display:none}.etape.on{display:block}
.champs{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.champs{grid-template-columns:1fr 1fr}.champs .large{grid-column:1/-1}}
label.ch{display:grid;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--encre-60)}
label.ch input,label.ch select{height:52px;border:1px solid var(--encre-12);background:#fff;padding:0 14px;font:400 16px var(--sans);color:var(--encre);border-radius:0}
label.ch input:focus{outline:2px solid var(--or);outline-offset:0;border-color:transparent}
label.ch input:user-invalid{border-color:#b8321f}
.actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.confirm h1{font-size:var(--t96)}
.confirm .num{font-family:var(--serif);font-size:var(--t56);color:var(--or)}

/* Pied */
footer{padding:var(--sec) var(--gout) 40px;border-top:1px solid var(--encre-12);font-size:13px;color:var(--encre-60);display:grid;gap:16px;background:var(--papier)}
footer nav{display:flex;gap:20px;flex-wrap:wrap}footer a{text-decoration:none}
footer .logo{font-family:var(--serif);font-size:22px;color:var(--encre)}

/* Toast, vol, nojs */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--encre);color:var(--creme);padding:14px 20px;font-size:14px;opacity:0;transition:.3s;z-index:40;display:flex;gap:18px;align-items:center;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--or);text-decoration:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.vol{position:fixed;z-index:50;width:56px;height:70px;background:var(--teinte,var(--papier));pointer-events:none;display:flex;align-items:center;justify-content:center;padding:6px;box-shadow:0 8px 20px rgba(21,19,15,.2)}
.vol img{max-height:100%;object-fit:contain}
.nojs{padding:12px var(--gout);font-size:13px;background:#fff3d6;color:#5c4400}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- Dans la boîte ---------- */
.dedans{padding-top:var(--sec);padding-bottom:var(--sec);border-top:1px solid var(--encre-12)}
.dedans-tete{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.dedans-tete h2{margin:.2em 0 0}
.dedans-resume{font-size:18px;max-width:60ch;margin:0 0 6px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--encre-12);background:var(--papier);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--encre-60)}
.pill.ok::before{background:var(--vert)}.pill.partiel::before{background:var(--or)}.pill.indic::before{background:#b07a2a}.pill.nc::before{background:var(--encre-12)}
.cases{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--encre-12);border:1px solid var(--encre-12)}
@media (min-width:600px){.cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.cases{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.cases{grid-template-columns:repeat(6,minmax(0,1fr))}}
.case{background:var(--papier);padding:16px 16px 18px;min-height:120px;display:flex;flex-direction:column;gap:4px}
.case .n{font-family:var(--serif);font-size:26px;letter-spacing:-.03em;line-height:1;color:var(--or);margin-bottom:6px;font-variant-numeric:tabular-nums}
.case .p{font-size:14px;line-height:1.35;font-weight:500}
.cases:not(.num) .case{min-height:104px;border-top:3px solid var(--or)}
.case .m{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-60)}
.case .f{margin-top:auto;padding-top:8px;font-size:12px;color:var(--encre-60)}
.case.inconnue{background:var(--creme)}.case.inconnue .n{color:var(--encre-12)}.case.inconnue .p{color:var(--encre-60);font-weight:400;font-style:italic}
.alcool{font-size:12px;color:var(--encre-60);border:1px solid var(--encre-12);padding:8px 10px;margin:0 0 16px}
.spoil-garde{margin-top:20px;padding:24px;border:1px dashed var(--encre-12);background:var(--papier);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.spoil-garde[hidden]{display:none}
.spoil-garde p{margin:0;max-width:44ch}
.spoil{margin-top:20px}
.spoil .txtbtn{margin-top:12px}
.dedans-src{font-size:13px;color:var(--encre-60);margin-top:16px}.dedans-src a{color:inherit}
.compare .col dt{font-size:12px}

/* ---------- Ambiance Noël (09/09) : hero photo + packshots posés sur la table ---------- */
.hero.noel{max-width:none;margin:0;padding-left:max(var(--gout),calc((100vw - 1360px)/2 + var(--gout)));padding-right:max(var(--gout),calc((100vw - 1360px)/2 + var(--gout)));background:#12291c url("../assets/scenes/salon-noel.webp") center right/cover no-repeat;color:var(--creme);min-height:calc(100svh - var(--ent));padding-top:56px;padding-bottom:56px}
.hero.noel::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,26,18,.92) 0%,rgba(10,26,18,.78) 38%,rgba(10,26,18,.15) 62%,rgba(10,26,18,0) 100%);pointer-events:none}
.hero.noel>*{position:relative}
.hero.noel .etq{color:rgba(246,241,231,.7)!important}
.hero.noel h1{color:var(--creme)}
.hero.noel h1 em{color:var(--or)}
.hero.noel .sous{color:rgba(246,241,231,.82)}
.hero.noel .btn{background:var(--creme);color:var(--encre);border-color:var(--creme)}
.hero.noel .btn.sec2{background:transparent;color:var(--creme);border-color:rgba(246,241,231,.55)}
.hero.noel .btn.sec2:hover{background:rgba(246,241,231,.12)}
.hero.noel .vitrine::before{background:radial-gradient(closest-side,rgba(0,0,0,.28),rgba(0,0,0,0) 72%)}
.hero.noel .piece img{filter:drop-shadow(0 calc(14px + var(--p) * 26px) calc(16px + var(--p) * 24px) rgba(0,0,0,calc(.35 + var(--p) * .15)))}
.hero.noel .piece .tag{background:var(--creme);color:var(--encre)}
.hero.noel .vitrine .leg{color:rgba(246,241,231,.6)}
@media (max-width:899px){.hero.noel{background-position:70% center}.hero.noel::before{background:linear-gradient(180deg,rgba(10,26,18,.25) 0%,rgba(10,26,18,.55) 45%,rgba(10,26,18,.94) 70%)}}
/* packshots sur table de Noël */
body.amb .carte-img,body.amb .galerie .visu{background:var(--teinte) url("../assets/scenes/table-noel-600.webp") center/cover no-repeat}
body.amb .galerie .visu{background-image:url("../assets/scenes/table-noel.webp")}
body.amb .carte-img.scene,body.amb .galerie .visu.scene{background-image:none}
body.amb .carte-img img{top:13%;bottom:7%;height:80%;filter:drop-shadow(0 18px 22px rgba(21,19,15,.32)) drop-shadow(0 2px 4px rgba(21,19,15,.2))}
body.amb .galerie .visu img{transform:translateY(4%);filter:drop-shadow(0 26px 30px rgba(21,19,15,.34)) drop-shadow(0 3px 5px rgba(21,19,15,.2))}
body.amb .carte:hover .carte-img{background-color:var(--teinte)}

/* ---------- Benchmark 09/09 : recherche, best-seller, prix par case, zoom, barre collante ---------- */
.ent{flex-wrap:wrap}
.rech{position:relative;flex:0 0 260px;margin-left:24px}
.rech input{width:100%;height:36px;border:1px solid var(--encre-12);background:var(--papier);padding:0 12px;font:14px var(--sans);color:var(--encre)}
.rech input:focus{outline:2px solid var(--or);outline-offset:1px}
.rech-res{position:absolute;top:calc(100% + 6px);right:0;width:min(420px,92vw);background:var(--papier);border:1px solid var(--encre-12);box-shadow:0 16px 40px rgba(21,19,15,.14);z-index:30;padding:6px}
.rech-res a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px;text-decoration:none;color:var(--encre);font-size:14px}
.rech-res a:hover{background:var(--creme)}
.rech-res img{width:44px;height:58px;object-fit:contain;background:var(--creme)}
.rech-res em{font-style:normal;font-family:var(--serif);font-size:16px}
.rech-res .tous{grid-template-columns:1fr;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-60)}
.rech-res .vide{display:block;padding:12px;font-size:14px;color:var(--encre-60)}
@media (max-width:899px){.rech{flex:1 1 100%;margin:0 0 10px;order:9}.ent{height:auto;padding-top:10px;padding-bottom:0}.ent nav{width:100%;justify-content:space-between}}
.carte .badge.best{background:var(--encre);color:var(--creme);left:auto;right:12px}
.best-note{font-size:13px;color:var(--encre-60);margin:-6px 0 14px}
.zoom{position:fixed;inset:0;z-index:60;background:rgba(21,19,15,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.zoom img{max-width:94vw;max-height:94vh;object-fit:contain}
.zoom button{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--creme);font-size:24px;cursor:pointer}
.galerie .visu{cursor:zoom-in}
.achat-fixe{position:fixed;left:0;right:0;top:0;z-index:25;background:rgba(251,248,242,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--encre-12);display:none;align-items:center;gap:16px;padding:8px var(--gout);transform:translateY(-100%);transition:transform .3s var(--ease)}
.achat-fixe img{width:40px;height:52px;object-fit:contain}
.achat-fixe span:first-of-type{flex:1;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.achat-fixe .prix{font-size:22px}
.achat-fixe .btn{height:44px}
@media (min-width:900px){.achat-fixe{display:flex}.achat-fixe.on{transform:translateY(0)}}
.choisir .n{background:var(--or)}