/* =========================================================================
   Harmony Interiors — Catalogue (articles · packs · promos)
   S'appuie sur la charte de style.css (--ink, --navy, --brass, --brass-soft,
   --canvas, --line, --f-display, --f-sans, --f-script).
   ========================================================================= */

.catalog { padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(4rem, 9vw, 7rem); }

.catalog__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.catalog__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.catalog__chip {
  font-family: var(--f-sans); font-size: .82rem; letter-spacing: .04em;
  padding: .52em 1.15em; border-radius: 999px; border: 1px solid var(--line, #e4ddcf);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.catalog__chip:hover { border-color: var(--brass); color: var(--navy); }
.catalog__chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

.catalog__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
.catalog__empty {
  grid-column: 1 / -1; text-align: center; color: var(--ink); opacity: .6;
  padding: 3rem 0; font-family: var(--f-display); font-size: 1.3rem;
}
.catalog__note { margin-top: 1.8rem; font-size: .8rem; letter-spacing: .02em; color: var(--ink); opacity: .55; }

.ccard {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line, #e8e2d6); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(10, 30, 60, .03);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
  animation: ccardIn .6s both;
}
@keyframes ccardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ccard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -26px rgba(10, 30, 60, .5); border-color: var(--brass-soft); }

.ccard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ccard:hover .ccard__media img { transform: scale(1.05); }
.ccard__noimg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-script); font-size: 2rem; color: var(--brass-soft); }
.ccard__badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  font-family: var(--f-sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .35em .8em; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, var(--brass), var(--brass-soft));
  box-shadow: 0 6px 16px -8px rgba(176, 137, 78, .8);
}

.ccard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.ccard__type { font-family: var(--f-sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.ccard__title { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.12; color: var(--ink); margin: .1rem 0 0; }
.ccard__incl { font-size: .82rem; line-height: 1.5; color: var(--navy); opacity: .85; margin: 0; }
.ccard__desc { font-size: .86rem; line-height: 1.55; color: var(--ink); opacity: .72; margin: 0; }

.ccard__foot { margin-top: auto; padding-top: .9rem; }
.ccard__price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .85rem; }
.ccard__now { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.ccard__old { font-size: .95rem; color: var(--ink); opacity: .5; text-decoration: line-through; }
.ccard[data-type="promo"] .ccard__now { color: var(--brass); }

.ccard__cta { display: flex; flex-direction: column; gap: .5rem; }
.ccard__btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--f-sans); font-size: .82rem; letter-spacing: .02em; padding: .72em 1em;
  border-radius: 10px; border: 1px solid transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .2s ease;
}
.ccard__btn:active { transform: translateY(1px); }
.ccard__btn--wa { background: #1f9d57; color: #fff; }
.ccard__btn--wa:hover { background: #188048; }
.ccard__btn--devis { background: transparent; color: var(--ink); border-color: var(--line, #dcd5c6); }
.ccard__btn--devis:hover { border-color: var(--brass); color: var(--navy); }

@media (max-width: 560px) {
  .catalog__grid { grid-template-columns: 1fr; }
  .catalog__bar { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   CATALOGUE IMMERSIF v2 (dans l'Expérience) — #catalogue / .xcat
   Seuil → scène coulissante (Articles · Packs · Offres). Valeurs explicites
   (experience.html ne charge PAS style.css).
   ========================================================================= */
.xcat { position: relative; min-height: 100vh; overflow: hidden; }
html.xcat-scroll-lock,
body.xcat-scroll-lock { overflow: hidden !important; overscroll-behavior: none; }
body.xcat-scroll-lock .xcat.is-locked {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;   /* svh = stable : ne grandit PAS quand la barre du navigateur se masque au scroll */
  margin-top: 0 !important;
  background: #07101f;
  isolation: isolate;
}
body.xcat-scroll-lock .contact-modal { z-index: 1200; }
body.xcat-scroll-lock .cursor,
body.xcat-scroll-lock .cursor-ring { z-index: 1300; }
.xcat::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(20, 46, 84, .42), rgba(5, 12, 26, 0) 60%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%); mask: linear-gradient(180deg, transparent 0, #000 16%); }

/* CTAs partagées */
.xcta-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.xcta { display: inline-flex; align-items: center; justify-content: center; font-family: "Jost", sans-serif; font-size: .82rem; letter-spacing: .02em; padding: .82em 1.55em; border-radius: 999px; border: 1px solid transparent; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .2s ease; }
.xcta:active { transform: translateY(1px); }
/* WhatsApp = TRANCHE DE VERRE VERT : vert nettement translucide (on voit à travers) + fort flou frosted + reflet diagonal de verre — sans contour, sans relief */
.xcta--wa { background: linear-gradient(125deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .14) 100%), linear-gradient(160deg, rgba(74, 228, 142, .3) 0%, rgba(22, 150, 98, .25) 100%); color: #fff; border-color: transparent; -webkit-backdrop-filter: blur(15px) saturate(1.7); backdrop-filter: blur(15px) saturate(1.7); box-shadow: none; text-shadow: 0 1px 7px rgba(4, 36, 22, .5); }
.xcta--wa:hover { background: linear-gradient(125deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .18) 100%), linear-gradient(160deg, rgba(88, 238, 156, .38) 0%, rgba(26, 166, 108, .32) 100%); }
.xcta--devis { color: #ece4d6; border-color: rgba(198, 169, 114, .5); background: rgba(255, 255, 255, .03); }
.xcta--devis:hover { border-color: #c6a972; color: #fff; background: rgba(198, 169, 114, .12); }
/* pastille « objet » (pack/article concerné) injectée en haut du formulaire contact verre poli */
.contact-modal__objet { width: fit-content; max-width: 100%; margin: .1rem 0 .2rem; font-family: "Jost", sans-serif; font-size: .78rem; letter-spacing: .03em; color: #0a1e3c; background: linear-gradient(120deg, #c6a972, #e7d4a8); padding: .5em 1.05em; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(198, 169, 114, .7); }
/* Formulaire devis ouvert DEPUIS le catalogue (mode centré .is-compact) : COMPACT → tout visible sans scroller.
   N'affecte PAS le formulaire ouvert depuis la section Contact (qui garde sa mise en page d'origine). */
.contact-modal.is-compact .contact-modal__glass { max-height: 94vh; max-height: 94dvh; }
.contact-modal.is-compact .contact-modal__scroll { padding: clamp(1.05rem, 2.4vw, 1.9rem); }
.contact-modal.is-compact .contact-modal__kicker { margin-bottom: .3rem; }
.contact-modal.is-compact h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: clamp(.5rem, 1.3vw, .9rem); line-height: 1.05; }
.contact-modal.is-compact .contact-modal__objet { margin: 0 0 .15rem; }
.contact-modal.is-compact .contact-modal__grid { gap: clamp(.55rem, 1.3vw, .85rem); }
.contact-modal.is-compact label { gap: .3rem; }
.contact-modal.is-compact input,
.contact-modal.is-compact textarea,
.contact-modal.is-compact .contact-choice__btn { padding: .6rem .8rem; }
.contact-modal.is-compact textarea { min-height: 64px; }
.contact-modal.is-compact .contact-modal__message { margin-top: clamp(.5rem, 1.2vw, .8rem); }
.contact-modal.is-compact button[type="submit"] { margin-top: clamp(.65rem, 1.5vw, 1.05rem); }

/* --- SEUIL / porte d'entrée --- */
.xcat__gate { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.xcat.is-entered .xcat__gate { opacity: 0; transform: scale(1.3); pointer-events: none; }
.xcat__gatein { max-width: 64ch; }
.xcat-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(3rem, 9vw, 7rem); line-height: .98; color: #f6f0e6; margin: .5rem 0 0; }
.xcat-title i { font-style: italic; color: #c6a972; }
.xcat__gate-sub { margin: 1.4rem 0 0; font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: rgba(236, 228, 214, .7); }
.xcat__enter { margin-top: 2.4rem; display: inline-flex; align-items: center; gap: .6em; font-family: "Jost", sans-serif; font-size: .9rem; letter-spacing: .06em; color: #0a1e3c; background: linear-gradient(120deg, #b0894e, #c6a972); border: none; border-radius: 999px; padding: .9em 1.9em; cursor: pointer; box-shadow: 0 18px 40px -18px rgba(198, 169, 114, .8); transition: transform .3s ease; }
.xcat__enter span { transition: transform .3s ease; }
.xcat__enter:hover { transform: translateY(-2px); }
.xcat__enter:hover span { transform: translateX(5px); }

/* --- SCÈNE --- */
/* L'intro (scale .8→1) part du POINT où se trouvait le bouton « Entrer » (capté en JS via
   --xcat-gate-dx/dy = décalage du bouton p/r au centre de l'écran). Sans lock = 0,0 → centre. */
.xcat__stage { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(.8); filter: blur(7px); pointer-events: none; transform-origin: calc(50% + var(--xcat-gate-dx, 0px)) calc(50% + var(--xcat-gate-dy, 0px)); transition: opacity .9s ease .1s, transform 1.15s cubic-bezier(.16, .8, .26, 1) .1s, filter .9s ease .1s; }
.xcat.is-entered .xcat__stage { opacity: 1; transform: none; filter: none; pointer-events: auto; }

.xcat__back {
  position: absolute; top: clamp(1rem, 3.7vh, 2.3rem); left: clamp(1rem, 3vw, 2.2rem); z-index: 6;
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  padding: .55em 1.05em; border-radius: 999px; border: 1px solid rgba(236, 228, 214, .22);
  font-family: "Jost", sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(246, 240, 230, .82); background: rgba(7, 16, 32, .34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  transition: color .35s ease, border-color .35s ease, background .35s ease, transform .25s ease;
}
.xcat__back:hover { color: #fff; border-color: rgba(198, 169, 114, .55); background: rgba(198, 169, 114, .12); transform: translateY(-1px); }
.xcat__back:active { transform: translateY(1px); }

.xcat__switch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: .3rem; padding: .28rem; border-radius: 999px; background: rgba(7, 16, 32, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(198, 169, 114, .2); }
.xcat__tab { font-family: "Jost", sans-serif; font-size: .8rem; letter-spacing: .05em; color: rgba(236, 228, 214, .7); background: transparent; border: none; border-radius: 999px; padding: .55em 1.3em; cursor: pointer; transition: background .35s ease, color .35s ease; }
.xcat__tab:hover { color: #f4efe6; }
.xcat__tab.is-on { background: linear-gradient(120deg, #b0894e, #c6a972); color: #0a1e3c; }

.xcat__edge { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(7, 16, 32, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 1.6rem; cursor: pointer; transition: background .3s, border-color .3s; }
.xcat__edge:hover { background: rgba(198, 169, 114, .3); border-color: #c6a972; }
.xcat__edge--prev { left: clamp(.5rem, 1.4vw, 1.2rem); }
.xcat__edge--next { right: clamp(.5rem, 1.4vw, 1.2rem); }

.xcat__viewport { position: absolute; inset: 0; z-index: 2; overflow: hidden; touch-action: pan-y; }
.xcat__track { display: flex; width: 100%; height: 100%; transition: transform .85s cubic-bezier(.2, .7, .2, 1); }
.xpane { flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(6rem, 14vh, 9rem) clamp(2.5rem, 7vw, 7rem) clamp(3rem, 7vh, 5rem); }
.xpane[data-pane="packs"] { padding: 0; }
/* promos : bloc qui défile verticalement (barre masquée), aligné en haut + marge basse généreuse →
   la fiche entière (coins bas arrondis) est toujours visible/atteignable, jamais coupée */
.xpane[data-pane="promos"] { display: block; overflow: hidden auto; scrollbar-width: none; padding-bottom: clamp(4rem, 9vh, 7rem); }
.xpane[data-pane="promos"]::-webkit-scrollbar { display: none; }

/* --- ARTICLES --- */
.xart { width: 100%; max-width: 1120px; margin: 0 auto; }
.xart__preview { position: relative; perspective: 1500px; min-height: clamp(300px, 44vh, 470px); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.xart__card { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .65s ease; }
.xart__card.is-enter { opacity: 0; transform: translateZ(-260px) translateX(calc(var(--dir, 1) * 70px)) rotateY(calc(var(--dir, 1) * -9deg)); }
.xart__card.is-leaving { position: absolute; inset: 0; opacity: 0; transform: translateZ(170px) translateX(calc(var(--dir, 1) * -60px)) rotateY(calc(var(--dir, 1) * 6deg)); pointer-events: none; }
.xart__shot { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid rgba(198, 169, 114, .22); box-shadow: 0 40px 90px -42px rgba(0, 0, 0, .85); }
.xart__shot img { width: 100%; height: 100%; object-fit: cover; }
.xart__meta { color: #ece4d6; }
.xart__kicker { font-family: "Jost", sans-serif; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: #c6a972; }
.xart__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1.05; margin: .5rem 0 0; color: #f6f0e6; }
.xart__desc { margin: .9rem 0 0; color: rgba(236, 228, 214, .72); font-family: "Jost", sans-serif; font-weight: 300; line-height: 1.6; max-width: 42ch; }
.xart__price { margin: 1.1rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; color: #f6f0e6; }
.xart__rail-row { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; }
.xart__nav { display: none; }
.xart__nav:hover { border-color: #c6a972; color: #fff; background: rgba(198, 169, 114, .12); }
/* rail = COVERFLOW simple : pile de vignettes en 3D centrée sur l'article actif (boucle) ; l'actif garde son POP 3D */
.xart__rail { --xthumb: clamp(82px, 9vw, 118px); display: flex; justify-content: center; gap: clamp(.55rem, 1.3vw, 1rem); width: 100%; max-width: 1120px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; padding: .25rem .3rem 1.05rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(198, 169, 114, .45) transparent; touch-action: pan-x pan-y; }
.xart__rail::-webkit-scrollbar { height: 6px; }
.xart__rail::-webkit-scrollbar-thumb { background: rgba(198, 169, 114, .45); border-radius: 999px; }
.xart__rail::-webkit-scrollbar-track { background: transparent; }
.xart__thumb { flex: 0 0 var(--xthumb); width: var(--xthumb); aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; padding: 0; background: #0a1e3c; scroll-snap-align: center; opacity: 0; animation: xartThumbIn .65s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 55ms);
  box-shadow: 0 24px 44px -30px rgba(0, 0, 0, .85);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, border-color .45s ease, box-shadow .5s ease; }
.xart__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* l'actif (centre) garde son POP 3D via --pop dans le transform de base (parallax pendant le glissé) ; ici juste la lueur laiton */
.xart__thumb:hover { transform: translateY(-5px); border-color: rgba(198, 169, 114, .46); box-shadow: 0 30px 58px -32px rgba(0, 0, 0, .9); }
.xart__thumb.is-on { opacity: 1; border-color: rgba(198, 169, 114, .72); transform: translateY(-8px) scale(1.04);
  box-shadow: 0 36px 72px -32px rgba(0, 0, 0, .95), 0 0 28px -8px rgba(198, 169, 114, .45); }
@keyframes xartThumbIn { to { opacity: 1; } }
/* pendant le glissé : pas de transition → les vignettes suivent le doigt en continu (mouvement 3D / perspective live) */
.xart__rail.is-dragging .xart__thumb { transition: none; }

/* Ruban editorial : toutes les pieces restent visibles, mais la ligne gagne du relief et du rythme. */
.xart__rail-row { position: relative; }
.xart__rail-row::before { content: ""; position: absolute; left: 50%; bottom: clamp(.9rem, 2vw, 1.3rem); width: min(980px, 82vw); height: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(198, 169, 114, .18), rgba(244, 238, 226, .28), rgba(198, 169, 114, .18), transparent); }
.xart__rail { --xthumb: clamp(104px, 10.4vw, 142px); align-items: center; gap: clamp(.5rem, 1.15vw, .95rem); min-height: clamp(150px, 15vw, 190px); overflow-x: auto; overflow-y: visible; padding: clamp(.9rem, 2vw, 1.3rem) .6rem clamp(1.35rem, 2.5vw, 1.85rem); perspective: 1200px; scrollbar-width: none; }
.xart__rail::-webkit-scrollbar { display: none; }
.xart__thumb { position: relative; flex-basis: var(--xthumb); width: var(--xthumb); height: calc(var(--xthumb) * var(--tall, 1.18)); aspect-ratio: auto; border-radius: 18px; background: transparent; transform: translateY(calc(var(--rise, 0) * 1px)) rotate(calc(var(--tilt, 0) * 1deg)); transform-origin: 50% 88%; opacity: 0; border-color: rgba(244, 238, 226, .16); box-shadow: 0 24px 60px -38px rgba(0, 0, 0, .96), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.xart__thumb::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 34%, rgba(0, 0, 0, .18) 100%); mix-blend-mode: screen; opacity: .48; transition: opacity .45s ease; }
.xart__thumb::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%) scale(.55); background: rgba(198, 169, 114, .58); box-shadow: 0 0 18px rgba(198, 169, 114, .55); opacity: .34; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
.xart__thumb img { transform: scale(1.08); filter: saturate(.9) contrast(1.03); transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease; }
.xart__thumb:hover { transform: translateY(calc((var(--rise, 0) - 10) * 1px)) rotate(calc(var(--tilt, 0) * .45deg)) scale(1.035); border-color: rgba(198, 169, 114, .55); box-shadow: 0 34px 82px -40px rgba(0, 0, 0, .98), 0 0 34px -16px rgba(198, 169, 114, .72); }
.xart__thumb:hover img { transform: scale(1.14); filter: saturate(1.04) contrast(1.06); }
.xart__thumb.is-on { transform: translateY(calc((var(--rise, 0) - 16) * 1px)) rotate(0deg) scale(1.1); border-color: rgba(218, 190, 132, .86); box-shadow: 0 42px 96px -42px rgba(0, 0, 0, 1), 0 0 42px -12px rgba(198, 169, 114, .62), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.xart__thumb.is-on::before { opacity: .78; }
.xart__thumb.is-on::after { transform: translateX(-50%) scale(1.18); opacity: 1; }
.xart__thumb.is-on img { transform: scale(1.12); filter: saturate(1.08) contrast(1.06); }
@media (prefers-reduced-motion: reduce) {
  .xart__thumb { animation: none; opacity: 1; transition: none; }
  .xart__thumb img { transition: none; }
}

/* Reset premium : filmstrip net, tous les apercus visibles, sans effet de pile. */
.xart__rail-row { position: relative; isolation: isolate; }
.xart__rail-row::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: min(1040px, 90vw); height: 70%; transform: translate(-50%, 50%); z-index: -1; pointer-events: none; border-radius: 28px; background:
  radial-gradient(ellipse at 50% 100%, rgba(198, 169, 114, .16), transparent 58%),
  linear-gradient(90deg, transparent, rgba(237, 230, 218, .08), transparent); filter: blur(18px); opacity: .78; }
.xart__rail { --xthumb: clamp(108px, 10.5vw, 148px); align-items: center; justify-content: center; gap: clamp(.55rem, 1vw, .85rem); max-width: 1120px; min-height: auto; overflow-x: auto; overflow-y: visible; padding: clamp(.72rem, 1.4vw, 1.05rem); border: 1px solid rgba(237, 230, 218, .11); border-radius: 24px; background:
  linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 44%, rgba(198, 169, 114, .045)),
  rgba(5, 11, 22, .18); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 90px -58px rgba(0, 0, 0, .96); scrollbar-width: none; perspective: none; }
.xart__rail::-webkit-scrollbar { display: none; }
.xart__thumb { position: relative; flex: 0 0 var(--xthumb); width: var(--xthumb); height: auto; aspect-ratio: 4 / 5; border-radius: 13px; background: #08101f; opacity: 0; transform: translateY(8px) scale(.985); border: 1px solid rgba(237, 230, 218, .14); box-shadow: 0 22px 48px -34px rgba(0, 0, 0, .98); animation: xartFilmIn .55s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .42s cubic-bezier(.2, .7, .2, 1), border-color .42s ease, box-shadow .42s ease, opacity .42s ease; }
.xart__thumb::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background:
  linear-gradient(125deg, rgba(255, 255, 255, .18), transparent 31%, rgba(0, 0, 0, .2) 100%),
  linear-gradient(to top, rgba(7, 15, 28, .58), transparent 42%); opacity: .58; mix-blend-mode: normal; transition: opacity .42s ease; }
.xart__thumb::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(198, 169, 114, .75), transparent); opacity: 0; transform: scaleX(.38); transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 0 14px rgba(198, 169, 114, .42); }
.xart__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); filter: saturate(.94) contrast(1.04); transition: transform .72s cubic-bezier(.2, .7, .2, 1), filter .72s ease; }
.xart__thumb:hover { transform: translateY(-6px) scale(1.025); border-color: rgba(198, 169, 114, .5); box-shadow: 0 30px 70px -38px rgba(0, 0, 0, 1), 0 0 24px -15px rgba(198, 169, 114, .7); }
.xart__thumb:hover img { transform: scale(1.08); filter: saturate(1.02) contrast(1.06); }
.xart__thumb.is-on { opacity: 1; transform: translateY(-9px) scale(1.075); border-color: rgba(218, 190, 132, .84); box-shadow: 0 38px 86px -42px rgba(0, 0, 0, 1), 0 0 38px -14px rgba(198, 169, 114, .66), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.xart__thumb.is-on::before { opacity: .42; }
.xart__thumb.is-on::after { opacity: 1; transform: scaleX(1); }
.xart__thumb.is-on img { transform: scale(1.07); filter: saturate(1.06) contrast(1.07); }
@keyframes xartFilmIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* --- PACKS : image (gauche/haut) + texte qui glisse --- */
.xpack { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.xpack__deck { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; }
/* barre de titres EN FLUX au-dessus du deck → l'image démarre toujours sous les titres (jamais de chevauchement) */
.xpack__titles { position: relative; z-index: 6; margin: 0 auto; padding: clamp(3.4rem, 8.5vh, 4.8rem) 1rem clamp(.5rem, 1.4vh, .9rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem 1.7rem; width: max-content; max-width: 94%; }
.xpack__titlebtn { position: relative; --dock-scale: 1; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: rgba(236, 228, 214, .42); background: none; border: none; cursor: pointer; padding: .15em .5em .55em; transform: scale(var(--dock-scale)); transform-origin: 50% 55%; transition: color .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
/* marqueur du titre SÉLECTIONNÉ : un petit point laiton lumineux dessous (pas un trait), apparaît en douceur */
.xpack__titlebtn::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: #c6a972; box-shadow: 0 0 10px rgba(198, 169, 114, .8); transform: translateX(-50%) scale(0); opacity: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; }
.xpack__titlebtn:hover { color: rgba(236, 228, 214, .78); }
/* SÉLECTIONNÉ nettement démarqué : laiton vif + plus grand + lueur douce + le point */
.xpack__titlebtn.is-on { --dock-scale: 1.16; color: #d8b87f; text-shadow: 0 0 24px rgba(198, 169, 114, .45); }
.xpack__titlebtn.is-on::after { transform: translateX(-50%) scale(1); opacity: 1; }
/* clic : un simple petit rebond élégant (fini le balayage doré / l'anim 3D chargée) */
.xpack__titlebtn.is-pop { animation: xpackTitleTap .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes xpackTitleTap { 0% { transform: scale(1.16); } 45% { transform: scale(1.24); } 100% { transform: scale(1.16); } }
/* panneau = image ENCADRÉE de taille fixe (réduite) + texte côte à côte, centrés (cross-fade entre packs) */
.xpack__panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease;
  display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1rem, 4vh, 3rem) clamp(2rem, 7vw, 7rem); }
.xpack__panel.is-on { opacity: 1; pointer-events: auto; }
/* image : cadre arrondi de DIMENSIONS FIXES (ne couvre plus tout le panneau), léger zoom à l'arrivée */
.xpack__media-wrap { position: relative; z-index: 1; flex: 0 0 auto; overflow: hidden;
  width: clamp(320px, 36vw, 460px); height: clamp(300px, 52vh, 540px);
  border-radius: 18px; border: 1px solid rgba(198, 169, 114, .28);
  box-shadow: 0 50px 110px -45px rgba(0, 0, 0, .9); -webkit-mask: none; mask: none; }
.xpack__media { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.07); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1); -webkit-mask: none; mask: none; }
.xpack__panel.is-on .xpack__media { transform: scale(1); }
.xpack__media-fade { display: none; }
.xpack__panelin { position: relative; z-index: 2; flex: 0 1 460px; display: flex; align-items: center; padding: 0; }
.xpack__panelin-in { padding: 0; color: #f1e9da; max-width: 460px; opacity: 0; transform: translateX(48px); transition: transform 1s cubic-bezier(.2, .7, .2, 1) .25s, opacity 1s ease .25s; }
.xpack__panel.is-on .xpack__panelin-in { opacity: 1; transform: none; }
.xpack__kicker { font-family: "Jost", sans-serif; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #c6a972; }
.xpack__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.04; margin: 0 0 .1rem; color: #f4eee2; }
.xpack__lead { margin: 1rem 0 0; font-family: "Jost", sans-serif; font-weight: 300; line-height: 1.6; color: rgba(241, 233, 218, .82); max-width: 44ch; }
.xpack__incl { margin: 1.3rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.7; color: rgba(240, 232, 218, .9); max-width: 46ch; }
.xpack__price { margin: 1.6rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; }
.xpack__price span { display: block; font-family: "Jost", sans-serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #c6a972; }
.xpack__nav { position: absolute; bottom: clamp(1.2rem, 4vh, 2rem); z-index: 4; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(7, 16, 32, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 1.4rem; cursor: pointer; transition: background .3s, border-color .3s; }
.xpack__nav:hover { background: rgba(198, 169, 114, .3); border-color: #c6a972; }
.xpack__nav--prev { left: clamp(1rem, 4vw, 3rem); }
.xpack__nav--next { left: calc(clamp(1rem, 4vw, 3rem) + 58px); }
.xpack__dots { position: absolute; bottom: clamp(1.6rem, 4.5vh, 2.4rem); right: clamp(1.4rem, 5vw, 4rem); z-index: 4; display: flex; gap: .5rem; }
.xpack__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: transparent; cursor: pointer; padding: 0; transition: background .3s, transform .3s; }
.xpack__dot.is-on { background: #c6a972; border-color: #c6a972; transform: scale(1.2); }

/* --- PROMOS (fiches plus design + plus pratiques, sans barre de défilement) --- */
.xpromo-block { width: 100%; max-width: 1120px; margin: 0 auto; }
.xpromo { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 340px)); justify-content: center; gap: clamp(1.2rem, 2.6vw, 2rem); padding: .4rem; }
/* pas de bordure → l'ombre est continue, sans « cadre » en bas */
.xpromo__card { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(18, 38, 70, .5), rgba(9, 20, 40, .42)); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border: none; border-radius: 18px; overflow: hidden; color: #ece4d6; box-shadow: 0 30px 70px -38px rgba(0, 0, 0, .9); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.xpromo__card:hover { transform: translateY(-7px); box-shadow: 0 44px 92px -40px rgba(0, 0, 0, .95); }
.xpromo__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1e3c; }
.xpromo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.xpromo__card:hover .xpromo__media img { transform: scale(1.07); }
.xpromo__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(8, 16, 32, .55)); }
.xpromo__badge { position: absolute; top: .85rem; right: .85rem; z-index: 2; font-family: "Jost", sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .04em; padding: .45em 1em; border-radius: 999px; color: #0a1e3c; background: linear-gradient(120deg, #e7d4a8, #c6a972); box-shadow: 0 10px 22px -8px rgba(198, 169, 114, .85); }
.xpromo__body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.xpromo__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; line-height: 1.08; color: #f6f0e6; margin: 0; }
.xpromo__desc { font-family: "Jost", sans-serif; font-weight: 300; font-size: .87rem; line-height: 1.55; color: rgba(236, 228, 214, .68); margin: 0; }
.xpromo__price { margin-top: auto; padding-top: .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; }
.xpromo__now { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.85rem; color: #c6a972; }
.xpromo__old { font-size: .95rem; color: rgba(236, 228, 214, .42); text-decoration: line-through; }
.xpromo__empty { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem); color: #f1e9da; }
.xpromo__empty span { display: block; margin-top: .8rem; font-family: "Jost", sans-serif; font-size: .9rem; font-weight: 300; color: rgba(236, 228, 214, .6); }

/* ---- DESKTOP : contenu (Articles · Packs · Offres) descendu + section écartée de la Méthode au-dessus ---- */
@media (min-width: 901px) {
  .xcat { margin-top: clamp(2.5rem, 7vh, 6rem); }                 /* respire après la section Méthode */
  .xcat__switch { top: clamp(1.1rem, 4vh, 2.6rem); }             /* badge Articles/Packs/Offres descendu */
  .xpane { padding-top: clamp(9rem, 20vh, 13rem); }              /* le contenu centré glisse vers le bas */
  .xpack__titles { padding-top: clamp(5rem, 12vh, 7rem); }       /* barre de titres packs alignée plus bas */
}

@media (min-width: 901px) {
  .xart { max-width: 1040px; }
  .xart__preview { min-height: clamp(260px, 38vh, 410px); margin-bottom: clamp(1rem, 2.4vw, 1.7rem); }
  .xart__card { align-items: start; grid-template-columns: .92fr 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); }
  .xart__shot { width: min(100%, 430px); justify-self: end; aspect-ratio: 4 / 3; }
  .xart__meta { padding-top: .05rem; }
  .xart__rail-row::before { display: none; }
  .xart__rail { --xthumb: clamp(88px, 8vw, 116px); max-width: 820px; min-height: clamp(128px, 13vw, 160px); overflow: visible; border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: .55rem 0 1rem; gap: 0; perspective: 1050px; perspective-origin: 50% 42%; }
  .xart__thumb { flex: 0 0 var(--xthumb); width: var(--xthumb); aspect-ratio: 4 / 5; margin-inline: clamp(-.18rem, -.25vw, -.08rem); border-radius: 12px; opacity: 1; transform:
    translateY(calc(var(--abs, 0) * 5px))
    translateZ(calc(var(--abs, 0) * -38px))
    rotateY(calc(var(--off, 0) * -10deg))
    scale(calc(1.04 - min(var(--abs, 0), 3) * .045));
    transform-style: preserve-3d; transform-origin: center; animation: xartFilmIn .55s cubic-bezier(.2, .7, .2, 1) forwards; border-color: rgba(237, 230, 218, .18); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .96); transition: transform .58s cubic-bezier(.2, .7, .2, 1), border-color .45s ease, box-shadow .55s ease, filter .55s ease; }
  .xart__thumb::before { opacity: calc(.5 + max(0, 1 - var(--abs, 0)) * .12); }
  .xart__thumb::after { bottom: 8px; }
  .xart__thumb:hover { transform: translateY(-8px) translateZ(34px) rotateY(calc(var(--off, 0) * -4deg)) scale(1.06); }
  .xart__thumb.is-on { transform: translateY(-12px) translateZ(58px) rotateY(0deg) scale(1.12); }
  .xart__thumb.is-on::after { opacity: 1; transform: scaleX(1); }
}

@media (min-width: 901px) {
  .xpack { --xpack-content-top: clamp(10.5rem, 25vh, 14rem); }
  .xpack__fixed-media { position: absolute; left: clamp(-72px, -3.6vw, -34px); top: 0; bottom: 0; z-index: 1; width: min(72vw, 1220px); height: 100%; pointer-events: none; opacity: 0; visibility: hidden; overflow: hidden; background: transparent; transform: translateX(-18px) scale(1.02); transition: opacity .7s ease, visibility .7s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, .72) 76%, rgba(0, 0, 0, .22) 91%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0, 0, 0, .72) 76%, rgba(0, 0, 0, .22) 91%, transparent 100%); }
  .xpack__fixed-shot { position: absolute; inset: 0; background: transparent center / cover no-repeat; opacity: 0; transform: translateX(-30px) scale(1.045); filter: saturate(.86) contrast(1.03) brightness(.95); transition: opacity .82s ease, transform 1.35s cubic-bezier(.2, .7, .2, 1), filter 1.35s ease; will-change: opacity, transform; }
  .xpack__fixed-shot.is-on { opacity: 1; transform: translateX(0) scale(1); filter: saturate(.96) contrast(1.05) brightness(1); }
  .xpack__fixed-shot.is-leaving { opacity: 0; transform: translateX(26px) scale(1.025); filter: saturate(.78) contrast(1.02) brightness(.86); }
  .xcat.is-entered[data-active-pane="packs"] .xpack__fixed-media.is-on { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
  .xpack__titles { position: absolute; left: 0; top: calc(var(--xpack-content-top) - .45rem); z-index: 20; width: min(56vw, 720px); max-width: none; margin: 0; padding: 0 clamp(1rem, 3vw, 3rem); justify-content: center; gap: .2rem clamp(1rem, 2vw, 1.8rem); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
  .xpack__titlebtn { color: rgba(255, 250, 239, .98); text-shadow: none; line-height: 1.12; padding-bottom: .72em; }
  .xpack__titlebtn:hover { color: #fff; }
  .xpack__titlebtn.is-on { color: #f3d8a0; text-shadow: none; }
  .xpack__panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; justify-content: initial; width: min(1120px, calc(100vw - clamp(5rem, 14vw, 14rem))); max-width: 1120px; margin: 0 auto; padding: var(--xpack-content-top) 0 clamp(3rem, 7vh, 5rem); isolation: isolate; }
  .xpack__media-wrap { display: none; }
  .xpack__media-wrap::after { content: none; }
  .xpack__media { height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); filter: saturate(.94) contrast(1.04); }
  .xpack__panel.is-on .xpack__media { transform: scale(1); }
  .xpack__panelin { grid-column: 2; z-index: 3; max-width: 460px; align-items: flex-start; }
  .xpack__panelin-in { max-width: 460px; transform: translateX(30px); }
  .xpack__title {
    position: relative;
    display: inline-block;
    margin: -.65rem 0 .48rem;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: 0;
    color: transparent;
    background-image: linear-gradient(100deg, #cdb88f 0%, #f6f0e6 34%, #fff7e4 48%, #f6f0e6 62%, #c2a675 100%);
    background-size: 240% 100%;
    background-position: 130% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: .05em .14em .2em;
    margin-left: -.14em;
    margin-right: -.14em;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .46)) drop-shadow(0 2px 9px rgba(198, 169, 114, .08));
    animation: xpackTitleFloat 5.2s ease-in-out infinite, xpackTitleSheen 4.6s cubic-bezier(.45, 0, .2, 1) infinite;
  }
  .xpack__title::after {
    content: attr(data-title);
    position: absolute;
    inset: .05em .14em .2em;
    pointer-events: none;
    opacity: .62;
    mix-blend-mode: screen;
    color: transparent;
    background-image: linear-gradient(100deg, transparent 0%, transparent 38%, #fff7e4 48%, transparent 59%, transparent 100%);
    background-size: 240% 100%;
    background-position: 130% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(3px) drop-shadow(0 0 9px rgba(255, 247, 228, .95)) drop-shadow(0 0 19px rgba(255, 243, 214, .45));
    animation: xpackTitleSheen 4.6s cubic-bezier(.45, 0, .2, 1) infinite;
  }
  @keyframes xpackTitleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  @keyframes xpackTitleSheen {
    0%, 20% { background-position: 130% 50%; }
    62%, 100% { background-position: -35% 50%; }
  }
  .xpack__lead, .xpack__incl { text-shadow: 0 18px 42px rgba(0, 0, 0, .65); }
}

@media (max-width: 900px) {
  html.xcat-scroll-lock,
  body.xcat-scroll-lock { width: 100%; height: 100%; }
  body.xcat-scroll-lock {
    position: fixed;
    top: calc(var(--xcat-lock-y, 0px) * -1);
    left: 0;
    right: 0;
  }
  body.xcat-scroll-lock .xcat.is-locked {
    height: 100vh;
    height: 100svh;       /* svh = stable : pas de saut quand la barre du navigateur se masque au scroll */
    max-height: 100svh;
    overflow: hidden;
  }
  .xpane { padding: clamp(4.5rem, 11vh, 7rem) 1.2rem 2rem; }
  .xcat__back { top: auto; bottom: .85rem; left: .8rem; min-height: 34px; padding: .48em .85em; font-size: .7rem; letter-spacing: .06em; }

  /* ---- ARTICLES mobile : grand aperçu COMPACT placé sous le badge ; prix + boutons réunis sur une
     ligne → on récupère la hauteur et le coverflow (caché en bas) redevient visible. ---- */
  .xpane[data-pane="articles"] { justify-content: flex-start; padding-top: clamp(3.4rem, 8vh, 4.8rem); }
  .xart { display: flex; flex-direction: column; }
  .xart__preview { min-height: 0; perspective: 1200px; margin-bottom: clamp(.9rem, 2.4vh, 1.6rem); }
  .xart__card { grid-template-columns: 1fr; gap: clamp(.7rem, 2vh, 1.1rem); align-content: start; }
  .xart__card.is-leaving { position: absolute; }
  .xart__shot { aspect-ratio: 16 / 10; width: 100%; max-width: 420px; max-height: 30vh; margin: 0 auto; }
  .xart__meta { text-align: center; }
  .xart__title { font-size: clamp(1.5rem, 6.5vw, 2.1rem); margin-top: .15rem; }
  .xart__desc { display: none; }                            /* libère la hauteur pour le coverflow */
  .xart__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem .9rem; margin-top: .8rem; }
  .xart__price { margin: 0; font-size: clamp(1.4rem, 5.5vw, 1.7rem); }
  .xart__buy .xcta-row { margin-top: 0; justify-content: center; gap: .5rem; }
  .xcta { padding: .62em 1.15em; font-size: .78rem; }
  .xart__rail { --xthumb: clamp(76px, 22vw, 102px); justify-content: flex-start; padding-inline: .15rem; }

  /* ---- PACKS mobile : même principe que desktop — image ENCADRÉE de taille fixe (réduite) EN HAUT,
     texte dessous (qui défile s'il déborde). ---- */
  .xpack__titles { padding: clamp(2.4rem, 7vh, 3.4rem) .6rem clamp(.3rem, 1vh, .6rem); gap: .15rem 1.1rem; }
  .xpack__titlebtn { font-size: clamp(1rem, 4.6vw, 1.3rem); }
  .xpack__titlebtn.is-on { --dock-scale: 1.12; }
  @keyframes xpackTitleTap { 0% { transform: scale(1.12); } 45% { transform: scale(1.2); } 100% { transform: scale(1.12); } }
  .xpack__panel { flex-direction: column; align-items: center; justify-content: flex-start;
    gap: clamp(.9rem, 3vh, 1.5rem); padding: clamp(.5rem, 2vh, 1.2rem) 1.1rem clamp(1.2rem, 4vh, 2rem); }
  .xpack__media-wrap { width: min(84vw, 400px); height: clamp(170px, 28vh, 260px); }
  .xpack__media { transform: scale(1.06); }
  .xpack__panel.is-on .xpack__media { transform: scale(1); }
  .xpack__panelin { flex: 1 1 auto; width: 100%; max-width: 460px; align-items: flex-start;
    overflow-y: auto; scrollbar-width: none; }
  .xpack__panelin::-webkit-scrollbar { display: none; }
  .xpack__panelin-in { transform: translateY(30px); max-width: none; text-align: center; }
  .xpack__panel.is-on .xpack__panelin-in { transform: none; }
  .xpack__incl { font-size: 1rem; line-height: 1.5; }
  .xpack__panel .xcta-row { justify-content: center; }
  .xpane[data-pane="packs"] { padding: 0; justify-content: flex-start; }
  .xpack__titles { width: 100%; max-width: 100%; justify-content: center; padding: clamp(3rem, 8vh, 4.2rem) .8rem .35rem; }
  .xpack__deck { flex: 1 1 auto; min-height: 0; }
  .xpack__panel { gap: 0; padding: 0 0 clamp(1.2rem, 4vh, 2rem); }
  .xpack__media-wrap { width: 100vw; max-width: none; height: clamp(230px, 37vh, 350px); margin-left: calc(50% - 50vw); border: 0; border-radius: 0; box-shadow: none; flex: 0 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .42) 6%, #000 13%, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .42) 6%, #000 13%, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%); }
  .xpack__panelin { margin-top: clamp(-.9rem, -2vh, -.25rem); padding: 0 1.1rem; transform: none; max-width: min(460px, 92vw); z-index: 2; }
  .xpack__panelin-in { text-align: center; }
  .xpack__panelin .xpack__title { display: none; }
  .xpack__price { display: flex; align-items: baseline; justify-content: center; gap: .45rem; }
  .xpack__price span { display: inline; }

  /* ---- OFFRES mobile : fiches sur axe HORIZONTAL, en flux (scroll-snap), l'aperçu (image) bien
     visible. Le bouton « devis » est retiré côté JS (Offres uniquement). ---- */
  .xpane[data-pane="promos"] { display: flex; flex-direction: column; justify-content: center;
    overflow: hidden; padding: clamp(4.5rem, 11vh, 7rem) 0 clamp(1.5rem, 4vh, 2.5rem); }
  .xpromo-block { width: 100%; max-width: none; }
  .xpromo { display: flex; grid-template-columns: none; flex-wrap: nowrap; justify-content: flex-start; gap: 1rem;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: .4rem clamp(1.1rem, 11vw, 4rem); }
  .xpromo::-webkit-scrollbar { display: none; }
  .xpromo__card { flex: 0 0 80%; max-width: 330px; scroll-snap-align: center; }
  .xpromo__empty { flex: 1 1 100%; }
}

/* Articles : carrousel 3D en bas + grand aperçu fixe en arrière-plan. */
.xcat__gatein { transform: translate(var(--xcat-gate-dx, 0px), var(--xcat-gate-dy, 0px)); }   /* compensation INSTANTANÉE : le bouton reste à sa place (pas de saut vers le centre) */
.xcat:not(.is-locked) .xcat__gatein { --xcat-gate-dx: 0px; --xcat-gate-dy: 0px; }
.xpane[data-pane="articles"] { position: relative; justify-content: stretch; padding: 0; }
.xart { position: relative; width: 100%; max-width: none; height: 100%; margin: 0; overflow: hidden; background: #1a1a1d; }   /* fond GRIS FONCÉ de la section Articles */
.xart::before,
.xart::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; }
.xart::before { top: 0; height: 100%; z-index: 0; background: none; }
.xart::after { bottom: 0; height: 46%; z-index: 0; background: none; }   /* fondu d'écran retiré : le fondu est sur le bord bas de la PHOTO (voir .xart__shot img) */
.xart__preview { position: absolute; inset: 0; z-index: 3; min-height: 0; margin: 0; perspective: none; overflow: hidden; pointer-events: none; }  /* image au PREMIER PLAN (au-dessus du coverflow) ; clics traversent vers les vignettes */
.xart__card { position: absolute; inset: 0; display: block; opacity: 1; transform: none; transition: opacity .85s ease, transform 1.05s cubic-bezier(.2, .7, .2, 1), filter .9s ease; }
/* Fondu enchaîné PUR (pas de zoom ni de glissé) -> l'aperçu de fond reste fixe en taille et en position. */
.xart__card.is-enter { opacity: 0; transform: none; filter: blur(6px); }
.xart__card.is-leaving { position: absolute; inset: 0; opacity: 0; transform: none; filter: blur(6px); pointer-events: none; }
/* Boîte : fondu DROITE seulement (le bas est géré sur la photo elle-même, ci-dessous). */
.xart__shot { position: absolute; left: clamp(-70px, -3.8vw, -28px); top: 0; height: auto; width: min(68vw, 1060px); max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, .68) 78%, rgba(0, 0, 0, .2) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, .68) 78%, rgba(0, 0, 0, .2) 92%, transparent 100%); }
/* L'IMG = la photo en hauteur naturelle (pas de letterbox) → le fondu tombe pile sur son BORD BAS.
   Fondu COURT : juste le contour bas qui se dissout, sans entrer dans la photo. */
.xart__shot img { width: 100%; height: auto; display: block; transform: none; filter: saturate(.95) contrast(1.05) brightness(.82);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .4) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .4) 95%, transparent 100%); }
.xart__meta { position: absolute; top: clamp(4.5rem, 12vh, 8rem); right: clamp(1.4rem, 8vw, 7rem); left: auto; z-index: 6; width: min(440px, 36vw); max-width: min(440px, 36vw); color: #ece4d6; text-align: left; }
.xart__title { font-size: clamp(2.25rem, 4.8vw, 4.1rem); max-width: 9ch; text-shadow: 0 24px 52px rgba(0, 0, 0, .62); }
.xart__desc { max-width: 38ch; color: rgba(246, 240, 230, .78); text-shadow: 0 18px 42px rgba(0, 0, 0, .68); }

/* ---- POINTS de détail (discrets, élégants) + LOUPE rectangle arrondi qui suit le curseur ---- */
.xart__hot { position: absolute; z-index: 7; transform: translate(-50%, -50%); width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; display: grid; place-items: center; }
.xart__hot i { display: block; position: relative; width: 9px; height: 9px; border-radius: 50%; background: rgba(247, 242, 232, .96); box-shadow: 0 0 7px rgba(0, 0, 0, .55), 0 0 0 3px rgba(198, 169, 114, .22); transition: background .3s ease, transform .3s ease; }
.xart__hot i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(247, 242, 232, .6); animation: xhotPulse 2.6s ease-out infinite; }
.xart__hot:hover i { background: #fff; transform: scale(1.18); }
@keyframes xhotPulse {
  0%   { transform: scale(.45); opacity: .85; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* Positions FIXES (mêmes pour tous les modèles), calées sur la photo de référence. */
.xart__hot--head { left: 51%; top: 34%; }   /* tête de lit — côté gauche */
.xart__hot--mid  { left: 73%; top: 33%; }   /* tête de lit — côté droit */
.xart__hot--foot { left: 47%; top: 80%; }   /* bas du lit (sommier) */
.xart__loupe {
  position: fixed; left: 0; top: 0; z-index: 220;
  width: clamp(230px, 30vw, 400px); aspect-ratio: 4 / 3; border-radius: 16px;
  border: none;                                   /* sans contour (charte du site) */
  box-shadow: 0 36px 84px -24px rgba(0, 0, 0, .92), 0 8px 24px -10px rgba(0, 0, 0, .55);
  background-repeat: no-repeat; background-size: cover; background-position: center;
  overflow: hidden;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.62);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.xart__loupe.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.xart__rail-row { position: absolute; left: 0; right: 0; bottom: clamp(2.4rem, 6.4vh, 4.7rem); z-index: 7; display: flex; justify-content: center; padding: 0 clamp(1rem, 5vw, 4rem); pointer-events: none; isolation: isolate; }
.xart__rail-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4rem; height: 14rem; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(7, 16, 32, .96), rgba(7, 16, 32, .62) 52%, transparent); filter: blur(3px); }
.xart__nav { position: absolute; top: 44%; z-index: 95; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(246, 240, 230, .34); background: rgba(0, 0, 0, .48); color: #fff; font-size: 2rem; line-height: 1; pointer-events: auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .9); }
.xart__nav--prev { left: clamp(1rem, 7vw, 7rem); }
.xart__nav--next { right: clamp(1rem, 7vw, 7rem); }
.xart__rail { --xthumb: clamp(104px, 10.6vw, 156px); pointer-events: auto; position: relative; width: min(1180px, 96vw); max-width: none; min-height: clamp(265px, 28vw, 370px); display: block; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; scrollbar-width: none; perspective: 1600px; perspective-origin: 50% 36%; touch-action: pan-x; }
.xart__rail::-webkit-scrollbar { display: none; }
.xart__thumb[data-art="0"] { --xart-x: 0px; --xart-y: -24px; --xart-z: 125px; --xart-ry: 0deg; --xart-rz: 0deg; --xart-scale: 1.14; --xart-opacity: 1; }
.xart__thumb[data-art="1"] { --xart-x: 94px; --xart-y: 10px; --xart-z: -52px; --xart-ry: -19deg; --xart-rz: -1.25deg; --xart-scale: .975; --xart-opacity: .94; }
.xart__thumb[data-art="2"] { --xart-x: 188px; --xart-y: 20px; --xart-z: -104px; --xart-ry: -38deg; --xart-rz: -2.5deg; --xart-scale: .93; --xart-opacity: .87; }
.xart__thumb[data-art="3"] { --xart-x: 282px; --xart-y: 30px; --xart-z: -156px; --xart-ry: -57deg; --xart-rz: -3.75deg; --xart-scale: .885; --xart-opacity: .8; }
.xart__thumb[data-art="4"] { --xart-x: -188px; --xart-y: 20px; --xart-z: -104px; --xart-ry: 38deg; --xart-rz: 2.5deg; --xart-scale: .93; --xart-opacity: .87; }
.xart__thumb[data-art="5"] { --xart-x: -94px; --xart-y: 10px; --xart-z: -52px; --xart-ry: 19deg; --xart-rz: 1.25deg; --xart-scale: .975; --xart-opacity: .94; }
.xart__thumb { position: absolute; left: 50%; top: 50%; flex: none; width: var(--xthumb); aspect-ratio: 4 / 5; height: auto; margin: 0; border-radius: 14px; opacity: var(--xart-opacity, 1); transform:
  translate(-50%, -50%)
  translateX(var(--xart-x, 0px))
  translateY(var(--xart-y, 0px))
  translateZ(var(--xart-z, 0px))
  rotateY(var(--xart-ry, 0deg))
  rotateZ(var(--xart-rz, 0deg))
  scale(var(--xart-scale, 1));
  transform-style: preserve-3d; transform-origin: center; border: 2px solid rgba(246, 240, 230, .82); background: #07101f; box-shadow: 0 34px 74px -40px rgba(0, 0, 0, 1), 0 0 18px -12px rgba(255, 255, 255, .55); transition: transform .68s cubic-bezier(.2, .7, .2, 1), border-color .45s ease, box-shadow .55s ease, filter .55s ease, opacity .45s ease; }
.xart__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); filter: saturate(.94) contrast(1.04); }
.xart__thumb:hover { border-color: rgba(255, 247, 228, .92); box-shadow: 0 42px 92px -42px rgba(0, 0, 0, 1), 0 0 28px -12px rgba(255, 247, 228, .72); }
.xart__thumb.is-on { transform:
  translate(-50%, -50%)
  translateX(var(--xart-x, 0px))
  translateY(var(--xart-y, -22px))
  translateZ(var(--xart-z, 120px))
  rotateY(0deg)
  rotateZ(0deg)
  scale(var(--xart-scale, 1.12)); border-color: rgba(255, 247, 228, .96); box-shadow: 0 54px 120px -50px rgba(0, 0, 0, 1), 0 0 40px -14px rgba(255, 247, 228, .7); }

@media (max-width: 900px) {
  .xcat.is-entered[data-active-pane="articles"] .xcat__back { top: .75rem; bottom: auto; }
  .xcat.is-entered[data-active-pane="articles"] .xcat__switch { top: 3.05rem; }
  /* Mobile : fondu sur LES QUATRE bords jusqu'à TRANSPARENT TOTAL (pas de palier) -> aucun liseré,
     coins réellement invisibles (l'aperçu se dissout dans le fond, sans bord ni patch bleu).
     + aperçu descendu (top) pour ne pas être collé en haut. */
  .xart__shot { left: 50%; right: auto; transform: translateX(-50%); width: 112vw; top: clamp(5.5rem, 13vh, 7.5rem);   /* image centrée, descendue un peu plus */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect; }
  /* « fond bleu » = les overlays navy posés PAR-DESSUS l'image (prévus pour le texte desktop à droite).
     En mobile (texte centré, image courte) on les retire : seul le fondu propre de l'image reste, +
     un voile bas TRÈS léger pour asseoir le titre. */
  .xart::before { background: none; }
  .xart::after { background: none; }
  .xart__meta { top: auto; bottom: clamp(14rem, 33vh, 18rem); left: 1.1rem; right: 1.1rem; width: auto; max-width: none; text-align: center; }   /* bloc texte CENTRÉ entre la photo et le dock */
  .xart__kicker { font-size: .62rem; letter-spacing: .22em; }
  .xart__title { max-width: 12ch; margin-inline: auto; font-size: clamp(1.7rem, 8.5vw, 2.6rem); }
  .xart__desc { display: block; margin: .5rem auto 0; max-width: 32ch; font-size: clamp(.82rem, 3.5vw, .96rem); line-height: 1.5; color: rgba(236, 228, 214, .8); }
  .xart__buy { justify-content: center; margin-top: clamp(1.5rem, 4.5vh, 2.4rem); }   /* écart sous la description → titre+desc remontent, prix/bouton ne bougent pas */
  /* Carousel visible = .xart__stack (l'ancien .xart__rail est masqué, seules ses flèches restent).
     Le stack est remonté plus bas dans le fichier (bloc @media près de la fin) ; ici on aligne les
     flèches sur le haut des lits. */
  .xart__rail-row { bottom: clamp(1.2rem, 3.5vh, 2rem); padding-inline: .2rem; }
  .xart__nav { width: 40px; height: 40px; font-size: 1.65rem; top: 46%; }
  .xart__nav--prev { left: .55rem; }
  .xart__nav--next { right: .55rem; }
  .xart__rail { --xthumb: clamp(76px, 21vw, 108px); width: 100vw; min-height: clamp(172px, 48vw, 232px); }
  .xart__thumb[data-art="1"] { --xart-x: 52px; --xart-y: 7px; --xart-z: -34px; --xart-ry: -17deg; --xart-rz: -1.2deg; }
  .xart__thumb[data-art="2"] { --xart-x: 104px; --xart-y: 14px; --xart-z: -68px; --xart-ry: -34deg; --xart-rz: -2.4deg; }
  .xart__thumb[data-art="3"] { --xart-x: 156px; --xart-y: 21px; --xart-z: -102px; --xart-ry: -51deg; --xart-rz: -3.6deg; }
  .xart__thumb[data-art="4"] { --xart-x: -104px; --xart-y: 14px; --xart-z: -68px; --xart-ry: 34deg; --xart-rz: 2.4deg; }
  .xart__thumb[data-art="5"] { --xart-x: -52px; --xart-y: 7px; --xart-z: -34px; --xart-ry: 17deg; --xart-rz: 1.2deg; }
  .xart__thumb { border-radius: 12px; }
  .xart__thumb.is-on { transform: translate(-50%, -50%) translateX(var(--xart-x, 0px)) translateY(var(--xart-y, -14px)) translateZ(var(--xart-z, 80px)) scale(var(--xart-scale, 1.1)); }
  .xart__shot img { filter: saturate(.94) contrast(1.04) brightness(.78); }
}

/* Articles : DOCK macOS — TOUTES les vignettes visibles en rangée plate. Au survol, la vignette sous le
   curseur grossit et ses voisines un peu (magnification fluide pilotée en JS via --mag) ; retour à
   l'identique quand le curseur sort. Clic = ouvre l'aperçu. */
.xart__stack {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 5vh, 3.2rem);
  transform: translateX(-50%);
  z-index: 8;
  width: min(920px, 96vw);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.85rem, 1.6vw, 1.5rem);                                /* vignettes plus espacées */
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(.8rem, 3vw, 2rem) 0;   /* marge haute pour la magnification */
  overflow: visible;
  pointer-events: auto;
}
.xart__stack-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(46px, 5vw, 76px);
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: none;                                                    /* pas de contour */
  background: #0a1424;
  cursor: pointer;
  transform: scale(var(--mag, 1));
  transform-origin: bottom center;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .95);
  -webkit-box-reflect: below 0 linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .12) 30%, transparent 62%);   /* reflet : part de la vignette → fond vers le bas */
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}
.xart__stack-card.is-on { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 1), 0 0 22px -8px rgba(198, 169, 114, .45); }   /* sélection : lueur laiton douce, sans contour */
.xart__stack-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.96) contrast(1.03); }
.xart__rail { opacity: 0; pointer-events: none; }
.xart__nav { display: none; }   /* flèches retirées : on choisit en cliquant une vignette */

@media (max-width: 900px) {
  /* Mobile : dock plat défilable (pas de survol → on fait défiler du doigt + tap pour choisir). */
  /* Dock REMONTÉ + glissable au doigt. Padding HAUT = la magnif ne se coupe plus en haut ; padding BAS = place pour le reflet. */
  /* Coverflow : padding latéral = 50vw → on peut amener N'IMPORTE quelle vignette au centre ; snap au centre. */
  .xart__stack { bottom: clamp(2.2rem, 6vh, 3.6rem); top: auto; width: 100vw; justify-content: flex-start; gap: .55rem;
    padding: clamp(3.4rem, 9.5vh, 5rem) calc(50vw - 2.6rem) clamp(3.8rem, 9vh, 4.8rem);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x;
    scroll-snap-type: x proximity; }
  .xart__stack::-webkit-scrollbar { display: none; }
  .xart__stack-card { width: clamp(60px, 18vw, 80px); border-radius: 8px; scroll-snap-align: center; }
}

/* ===== ARTICLES — TÉLÉPHONE À L'HORIZONTALE (landscape, hauteur courte) =====
   Photo centrée en haut, bloc texte descendu EN BAS, dock coverflow (glissé du doigt) juste au-dessus. */
@media (orientation: landscape) and (max-height: 560px) {
  .xpane[data-pane="articles"] { padding: 0; }
  /* photo CENTRÉE (sous les onglets), taille bornée par la hauteur courte */
  .xart__shot { left: 50%; right: auto; transform: translateX(-50%); width: min(42vw, 74vh); top: clamp(3rem, 14vh, 4rem); }
  .xart__shot img { object-position: center top; }
  /* texte EN BAS, centré */
  .xart__meta { top: auto; bottom: clamp(.4rem, 2.6vh, 1rem); left: 1rem; right: 1rem; width: auto; max-width: none; text-align: center; }
  .xart__kicker { display: none; }
  .xart__title { font-size: clamp(1.2rem, 5.8vh, 1.8rem); max-width: none; margin: 0 auto; }
  .xart__buy { margin-top: .25rem; }
  .xart__price { margin: 0; }
  /* dock coverflow CENTRÉ, au-dessus du texte ; overflow visible (les 6 tiennent) → magnification non coupée */
  .xart__stack { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: clamp(3.8rem, 21vh, 6rem);
    width: auto; max-width: 96vw; justify-content: center; gap: clamp(.4rem, 1.4vw, .8rem);
    padding: clamp(1.2rem, 5.5vh, 2rem) .6rem 0; overflow: visible; }
  .xart__stack-card { width: clamp(46px, 15vh, 70px); border-radius: 7px; }
}