/* ==========================================================================
   Roues de cartes de l'accueil (module home-cards), à la place des carrousels
   Splide. Reprise de maquettes/accueil-roue-cartes/roue-cartes.css, habillage
   aux couleurs du site : Roboto 300 en capitales espacées, crème #f5f5e9,
   noir #020202.
   ========================================================================== */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

.mw-showcase {
  --mw-ink: #f5f5e9;
  --mw-text: #000;
  --mw-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate; /* les cartes restent sous l'en-tête fixe */
  padding: 90px 0 100px;
  overflow: clip;
  text-align: center;
  color: var(--mw-text);
  background: #fff;
}
.mw-showcase--dark { --mw-text: #f5f5e9; background: #020202; padding-top: 70px; }

/* En-tête de section : mêmes styles que les titres de l'accueil */
.mw-showcase__head { position: relative; z-index: 2; max-width: 1200px; margin-inline: auto; padding-inline: 30px; }
.mw-showcase__eyebrow {
  font-family: "Roboto"; font-weight: 400; font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase; color: #0541a4; margin-bottom: 14px;
}
.mw-showcase--dark .mw-showcase__eyebrow { color: rgba(245, 245, 233, .7); }
.mw-showcase__title {
  font-family: "Roboto"; font-weight: 300; font-size: 36px; line-height: 1.4;
  letter-spacing: 3px; text-transform: uppercase; color: inherit;
}
.mw-showcase--light .mw-showcase__title { font-size: 30px; line-height: 1.7; }

/* ---------- Le jeu de cartes ---------- */
.mw-deck {
  --card-w: 290px;
  --card-h: calc(var(--card-w) * 1.6176);
  --card-gap: 44px;
  --arc: 3.6;
  --fan: 1;
  --card-ink: rgba(245, 245, 233, .5);
  --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  height: calc(var(--card-h) * 1.34);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.mw-deck.is-dragging { cursor: grabbing; }
/* Le texte du dos garde des tailles fixes quand la carte rétrécit : sous 1200 px, le logo
   (et son halo) rapetisse et remonte pour ne pas chevaucher « Collection » */
@media (max-width: 1199px) { .mw-deck { --card-w: 264px; --card-gap: 32px; --emblem-w: 40%; --emblem-y: 30%; --halo-y: 33%; } }
@media (max-width: 767px) { .mw-deck { --card-w: min(64vw, 256px); --card-gap: 20px; margin-top: 28px; } }

.mw-deck__item {
  position: absolute;
  top: 32px;
  left: 50%;
  z-index: var(--z, 0);
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  transform-origin: 50% calc(var(--arc) * 100%);
  transform: rotate(calc(var(--k, 0) * var(--step, 0deg) * var(--fan))) translateY(calc(var(--lift) * -1));
  transition: --lift .6s var(--mw-ease);
  perspective: 1400px;
  pointer-events: auto;
}
.mw-deck__item:hover, .mw-deck__item:focus-within, .mw-deck__item.is-active { z-index: 100; }
.mw-deck__item:hover, .mw-deck__item:focus-within { --lift: 24px; }
.mw-deck__item.is-far { pointer-events: none; }
.mw-deck.is-dragging .mw-deck__item { --lift: 0px; }

.mw-card {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: var(--fade, 1);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--mw-ease);
  will-change: transform;
}
.mw-card__flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
  cursor: inherit;
  outline: none;
}
.mw-deck__item.is-flipped .mw-card__flip { transform: rotateY(180deg); }
.mw-card__flip:focus-visible .mw-card__face { outline: 1px solid var(--mw-ink); outline-offset: 6px; }

.mw-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  color: var(--mw-ink);
  background: var(--card-grain), radial-gradient(120% 90% at 50% 35%, #232220 0%, #181817 55%, #101010 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 236, .06), 0 18px 36px -16px rgba(0, 0, 0, .45), 0 6px 12px -8px rgba(0, 0, 0, .35);
}
.mw-showcase--light .mw-card__face {
  box-shadow: inset 0 0 0 1px rgba(245, 245, 236, .06), 0 26px 40px -18px rgba(0, 0, 0, .55), 0 8px 14px -8px rgba(0, 0, 0, .35);
}
.mw-card__face--front { transform: rotateY(0deg); }
.mw-card__face--back { transform: rotateY(180deg); }
/* La face cachée est masquée à mi-retournement, quand la carte est vue par la
   tranche : sans ça, Chrome laisse transparaître le texte du recto en miroir */
.mw-card__face { transition: visibility 0s linear .4s; }
.mw-card__face--back,
.mw-deck__item.is-flipped .mw-card__face--front { visibility: hidden; }
.mw-deck__item.is-flipped .mw-card__face--back { visibility: visible; }

/* Motif de dos de carte, cadre au trait et marques d'angle */
.mw-card__pattern {
  position: absolute;
  inset: 7% 8%;
  opacity: .55;
  background:
    repeating-linear-gradient(45deg, rgba(241, 232, 216, .06) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(241, 232, 216, .06) 0 1px, transparent 1px 12px);
  -webkit-mask: radial-gradient(75% 60% at 50% 45%, #000 30%, transparent 100%);
  mask: radial-gradient(75% 60% at 50% 45%, #000 30%, transparent 100%);
}
.mw-card__face--back .mw-card__pattern {
  opacity: 1;
  background:
    radial-gradient(circle at 50% var(--halo-y, 38%), #181817 0 17%, rgba(24, 24, 23, 0) 26%),
    repeating-radial-gradient(circle at 50% var(--halo-y, 38%), rgba(241, 232, 216, .1) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg, rgba(241, 232, 216, .07) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(241, 232, 216, .07) 0 1px, transparent 1px 10px);
  -webkit-mask: linear-gradient(#000 52%, transparent 80%);
  mask: linear-gradient(#000 52%, transparent 80%);
}
.mw-card__frame {
  --run-x: 62%;
  --run-y: 74%;
  position: absolute;
  inset: 4.6% 6%;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--card-ink), var(--card-ink)) 50% 0 / var(--run-x) 1px no-repeat,
    linear-gradient(var(--card-ink), var(--card-ink)) 50% 100% / var(--run-x) 1px no-repeat,
    linear-gradient(var(--card-ink), var(--card-ink)) 0 50% / 1px var(--run-y) no-repeat,
    linear-gradient(var(--card-ink), var(--card-ink)) 100% 50% / 1px var(--run-y) no-repeat;
}
.mw-card__mark {
  position: absolute;
  z-index: 2;
  width: 16px;
  aspect-ratio: 1;
  opacity: .85;
  background: url("../img/card-mark.webp") center / contain no-repeat;
}
.mw-card__mark--top { top: calc(4.6% + 5px); left: calc(6% + 5px); }
.mw-card__mark--bottom { bottom: calc(4.6% + 5px); right: calc(6% + 5px); rotate: 180deg; }

/* Face avant : le couteau détouré */
.mw-card__media { position: absolute; inset: 8% 14% 35%; }
.mw-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6));
  transition: scale .9s var(--mw-ease);
}
.mw-deck__item:hover .mw-card__img { scale: 1.04; }

/* Face avant photo (familles de couteaux) : la photo en plein cadre */
.mw-deck--photo .mw-card__face--front .mw-card__pattern { display: none; }
.mw-deck--photo .mw-card__media { inset: 0; z-index: 0; overflow: hidden; background: #141414; }
.mw-deck--photo .mw-card__img { object-fit: cover; filter: saturate(.85) brightness(.92); object-position: var(--focus, 50% 50%); }
.mw-deck--photo .mw-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(16, 16, 16, .55) 0%, rgba(16, 16, 16, 0) 22%),
    linear-gradient(rgba(16, 16, 16, 0) 40%, rgba(16, 16, 16, .7) 68%, rgba(16, 16, 16, .96) 100%);
}

.mw-card__caption, .mw-card__detail {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 11%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
/* Cartes produits : la légende du recto porte aussi le prix, on la descend */
.mw-deck:not(.mw-deck--photo) .mw-card__caption { bottom: 9%; }
.mw-card__eyebrow {
  font-family: "Roboto"; font-weight: 400; font-size: 11px; line-height: 1.3;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(245, 245, 233, .72);
}
.mw-card__title {
  font-family: "Roboto"; font-weight: 300; font-size: calc(var(--card-w) * .082); line-height: 1.15;
  letter-spacing: 2px; text-transform: uppercase; text-wrap: balance;
}
.mw-card__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--mw-ease);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 250, 238, .16), rgba(255, 250, 238, 0) 46%);
}
.mw-deck__item:hover .mw-card__glare, .mw-deck__item:focus-within .mw-card__glare { opacity: 1; }

/* Dos : photo du produit droite, en plein cadre et en noir et blanc ; --focus règle le cadrage */
.mw-card__photo { position: absolute; inset: 0; overflow: hidden; background: #141414; }
.mw-card__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: grayscale(1) contrast(1.08) brightness(.8);
}
/* Image pas encore chargée (front.js : détourés à l'approche de la section, dos quand la carte approche du centre) */
.mw-card__photo-img:not([src]),
.mw-card__img:not([src]) { display: none; }
.mw-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(16, 16, 16, .55) 0%, rgba(16, 16, 16, 0) 20%),
    linear-gradient(rgba(16, 16, 16, 0) 34%, rgba(16, 16, 16, .72) 62%, rgba(16, 16, 16, .97) 100%);
}
.mw-card__emblem {
  position: absolute;
  top: var(--emblem-y, 34%);
  left: 50%;
  z-index: 1;
  width: var(--emblem-w, 50%);
  aspect-ratio: 350 / 337;
  translate: -50% -50%;
  background: url("../img/card-emblem.webp") center / contain no-repeat;
}
.mw-card__name {
  font-family: "Roboto"; font-weight: 300; font-size: calc(var(--card-w) * .074); line-height: 1.2;
  letter-spacing: 2px; text-transform: uppercase; text-wrap: balance;
}
.mw-card__text { font-family: "Roboto"; font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(245, 245, 233, .82); text-wrap: balance; }
.mw-card__price { font-family: "Roboto"; font-weight: 400; font-size: 18px; letter-spacing: 1px; color: #f5f5e9; }
.mw-card__caption .mw-card__price { font-size: calc(var(--card-w) * .058); letter-spacing: 1.5px; }
/* « dès » devant un prix qui varie selon les options : plus petit et plus léger que le montant */
.mw-card__from { font-weight: 300; font-size: .72em; letter-spacing: 1px; opacity: .8; }
.mw-card__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(245, 245, 233, .85);
  color: #f5f5e9;
  font-family: "Roboto"; font-weight: 400; font-size: 11px; line-height: 1;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease-in, color .2s ease-in;
}
.mw-card__cta:hover, .mw-card__cta:focus-visible { background: #f5f5e9; color: #020202; }
.mw-deck__item:not(.is-active) .mw-card__cta { pointer-events: none; }

/* Distribution : les cartes partent du paquet quand la section arrive à l'écran */
.mw-deck.is-dealing .mw-deck__item { transition: none; }

/* ---------- Commandes sous la roue ----------
   Les flèches et le compteur (largeur fixe) ne bougent pas ; le nom de la
   carte, de longueur variable, passe sur la ligne du dessous. */
.mw-controls {
  position: relative;
  z-index: 110;
  display: grid;
  justify-items: center;
  row-gap: 10px;
  margin-top: 8px;
  padding-inline: 20px;
}
.mw-controls__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.mw-controls__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease-in, color .2s ease-in;
}
.mw-controls__btn svg { width: 14px; height: 14px; }
.mw-showcase--dark .mw-controls__btn:hover { background: #f5f5e9; color: #020202; }
.mw-showcase--light .mw-controls__btn:hover { background: #000; color: #fff; }
.mw-controls__count {
  min-width: 84px;
  text-align: center;
  font-family: "Roboto"; font-weight: 400; font-size: 12px; letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  color: #0541a4;
}
.mw-showcase--dark .mw-controls__count { color: #f5f5e9; }
.mw-controls__label {
  min-height: 1.5em;
  font-family: "Roboto"; font-weight: 400; font-size: 12px; line-height: 1.5;
  letter-spacing: 3px; text-transform: uppercase; text-wrap: balance;
}
.mw-controls__hint {
  margin-top: -4px;
  font-family: "Roboto"; font-weight: 400; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; opacity: .55;
}
.mw-hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .mw-hint--pointer { display: none; }
  .mw-hint--touch { display: inline; }
}

/* ---------- Bloc texte + bouton sous la roue ---------- */
.mw-foot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  row-gap: 34px;
  max-width: 1200px;
  margin: 70px auto 0;
  padding: 90px 30px;
}
.mw-foot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(92vw, 860px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: var(--foot-image, none) center / cover no-repeat;
  -webkit-mask: radial-gradient(circle closest-side, #000 0% 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .15) 84%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 0% 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .15) 84%, transparent 100%);
}
.mw-showcase--dark .mw-foot::before { filter: grayscale(1) brightness(.7); opacity: .45; }
.mw-showcase--light .mw-foot::before { filter: grayscale(1) contrast(.9) brightness(1.15); opacity: .16; }
.mw-foot__text {
  max-width: 640px;
  font-family: "Roboto"; font-weight: 300; font-size: 19px; line-height: 1.7;
  color: inherit; text-wrap: balance;
}
.mw-showcase--dark .mw-foot__text { text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }

/* Boutons : copies des boutons de l'accueil (bannière et « Voir les couteaux ») */
.mw-btn {
  display: block;
  width: max-content;
  height: 40px;
  padding: 10px 20px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-family: "Roboto"; font-weight: 400; font-size: 14px; line-height: normal;
  letter-spacing: 3px; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: all .2s ease-in;
}
.mw-btn:hover { background: #000; color: #fff; }
.mw-showcase--dark .mw-btn { border-color: #fff; color: #fff; }
.mw-showcase--dark .mw-btn:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 768px) {
  .mw-showcase { padding: 50px 0 60px; }
  .mw-showcase--dark { padding-top: 40px; }
  .mw-showcase__title { font-size: 26px; }
  .mw-showcase--light .mw-showcase__title { font-size: 22px; }
  .mw-foot { margin-top: 30px; padding: 60px 20px; row-gap: 26px; }
  .mw-foot__text { font-size: 17px; }
  .mw-controls__label { font-size: 11px; letter-spacing: 2px; }
  .mw-controls__hint { letter-spacing: 1px; }
}
@media (max-width: 599px) {
  .mw-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-deck__item, .mw-card, .mw-card__flip, .mw-card__face, .mw-card__img { transition: none; }
}