/* ===== Variables ===== */
.m123-strip {
  --m123-bordeaux:      #4A0F14;
  --m123-bordeaux-dark: #2E080C;
  --m123-ivory:         #F4EFEA;
  --m123-ivory-soft:    rgba(244,239,234,.72);
  --m123-hairline:      rgba(244,239,234,.45);
  --m123-gap:           2px;
  /* Format des volets en mobile : 9/10 = presque carré, 5/6 ou 4/5 = plus haut, 1/1 = carré */
  --m123-ratio:         9 / 10;
  /* Marges mobile : sur les côtés du bloc, et entre les volets */
  --m123-marge-cotes:   clamp(14px, 4vw, 22px);
  --m123-marge-volets:  clamp(12px, 3.5vw, 18px);
  --m123-ease:          cubic-bezier(.22,.61,.36,1);
  --m123-dur:           620ms;
}

/* ===== Conteneur ===== */
.m123-strip {
  display: flex;
  gap: var(--m123-gap, 2px);
  height: clamp(360px, 40vw, 540px);
  margin: 0;
  padding: 0;
  background:  #4A0F14;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== Carte ===== */
.m123-card {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  background: var(--m123-bordeaux-dark, #2E080C);
  will-change: flex-grow;
  -webkit-tap-highlight-color: transparent;
  transition:
    flex-grow var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1)),
    opacity var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1)),
    box-shadow var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1));
}

/* Le <picture> occupe toute la carte, sinon l'image perd son cadrage en hauteur */
.m123-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.m123-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ===== Textes des cartes photo ===== */
.m123-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 clamp(18px, 2.2vw, 34px) clamp(20px, 2.4vw, 34px);
  text-shadow: 0 1px 12px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}

.m123-card__eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--m123-ivory-soft, rgba(244,239,234,.72));
}

.m123-card__title {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--m123-ivory, #F4EFEA);
  transition: letter-spacing var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1));
}

.m123-card__title-sub {
  display: inline-block;
  margin-left: .6em;
  font-size: .56em;
  font-weight: 400;
  letter-spacing: .2em;
  vertical-align: .38em;
  color: var(--m123-ivory-soft, rgba(244,239,234,.72));
}

.m123-card__rule {
  display: block;
  height: 1px;
  width: 34px;
  margin: 16px 0 0;
  background: var(--m123-hairline, rgba(244,239,234,.45));
  transform-origin: left center;
  transition: width var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1)),
              background-color var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1));
}

.m123-card__cta {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--m123-ivory, #F4EFEA);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1)),
              transform var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1));
}

/* ===== Carte panneau texte ===== */
.m123-card--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m123-bordeaux, #4A0F14);
}

.m123-panel {
  display: block;
  width: 100%;
  padding: clamp(24px, 3vw, 44px);
  text-align: center;
}

.m123-panel__title {
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  font-size: clamp(16px, 1.45vw, 23px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m123-ivory, #F4EFEA);
  transition: letter-spacing var(--m123-dur, 620ms) var(--m123-ease, cubic-bezier(.22,.61,.36,1));
}

.m123-panel__list {
  display: block;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m123-ivory-soft, rgba(244,239,234,.72));
}

.m123-panel__logo {
  display: block;
  width: clamp(96px, 9vw, 140px);
  height: auto;
  margin: clamp(22px, 2.6vw, 40px) auto 0;
}

/* ===== Survol desktop ===== */
@media (hover: hover) and (pointer: fine) {
  .m123-strip:hover .m123-card {
    flex-grow: .8;
  }

  .m123-strip .m123-card:hover,
  .m123-strip .m123-card:focus-visible {
    flex-grow: 1.6;
    z-index: 3;
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
  }

  .m123-card:hover .m123-card__title,
  .m123-card:hover .m123-panel__title {
    letter-spacing: .09em;
  }

  .m123-card:hover .m123-card__rule {
    width: 76px;
    background-color: var(--m123-ivory, #F4EFEA);
  }

  .m123-card:hover .m123-card__cta {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Focus clavier ===== */
.m123-card:focus-visible {
  outline: 1px solid var(--m123-ivory, #F4EFEA);
  outline-offset: -6px;
}

/* ===== Tablette ===== */
@media (max-width: 1024px) {
  .m123-strip {
    height: clamp(300px, 46vw, 420px);
  }
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .m123-strip:hover .m123-card {
    flex-grow: .88;
  }

  .m123-strip .m123-card:hover {
    flex-grow: 1.35;
  }
}

/* ===== Mobile : 3 volets empilés ===== */
@media (max-width: 767px) {

  .m123-strip {
    display: block;
    height: auto;
    padding: 0 var(--m123-marge-cotes, 16px);
    background: #FFFFFF;
  }

  .m123-card {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: var(--m123-ratio, 9 / 10);
    margin-bottom: var(--m123-marge-volets, 14px);
  }

  .m123-card:last-child {
    margin-bottom: 0;
  }

  /* -- Textes -- */
  .m123-card__body {
    padding: 0 clamp(18px, 5vw, 28px) clamp(20px, 5vw, 28px);
  }

  .m123-card__title {
    font-size: clamp(16px, 5vw, 20px);
  }

  .m123-card__cta {
    display: none;
  }

  /* -- Panneau fidélité -- */
  .m123-panel {
    padding: clamp(20px, 6vw, 32px) 20px;
  }

  .m123-panel__title {
    font-size: clamp(15px, 4.6vw, 19px);
    letter-spacing: .1em;
  }

  .m123-panel__list {
    font-size: clamp(10px, 3vw, 12px);
  }

  .m123-panel__logo {
    width: clamp(80px, 20vw, 120px);
  }
}

/* ===== Très petits écrans ===== */
@media (max-width: 380px) {
  .m123-card__title {
    font-size: 14px;
  }

  .m123-panel__title {
    font-size: 13px;
  }
}

/* ===== Animations réduites ===== */
@media (prefers-reduced-motion: reduce) {
  .m123-card,
  .m123-card__img,
  .m123-card__rule,
  .m123-card__cta,
  .m123-card__title,
  .m123-panel__title {
    transition-duration: 1ms;
  }
}