/* ============================================================
   TRYPTIQUE — sections basses
   Desktop/tablette : 3 volets en flex avec expansion au survol
   Mobile (<=767px)  : volet fixe « Seconde vie » + carrousel vertical 2 volets
   ============================================================ */

/* ===== 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 sous le volet Seconde vie */
  --m123-marge-cotes:   clamp(14px, 4vw, 22px);
  --m123-marge-fixe:    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;
}

/* Calque de l'image hover : servi uniquement en mobile, neutralisé partout ailleurs
   (en desktop c'est le swap de src en JS qui opère, comportement d'origine) */
.m123-card__hover { display: none; }

/* ===== Carrousel mobile : neutralisé hors mobile ===== */
/* display:contents rend les enveloppes transparentes : en desktop/tablette
   .m123-strip reçoit directement les cartes en flex, mise en page d'origine intacte */
.m123-carousel__cadre,
.m123-carousel__piste { display: contents; }
.m123-card--clone,
.m123-carousel__jalons { display: none; }

/* ===== 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 : volet fixe Seconde vie + carrousel 2 volets ===== */
@media (max-width: 767px) {

  /* -- Le strip devient un simple conteneur vertical, avec marges blanches -- */
  .m123-strip {
    display: block;
    height: auto;
    padding: 0 var(--m123-marge-cotes, 16px);
    background: #FFFFFF;
  }

  .m123-card {
    flex: none;
  }

  /* -- Volet fixe : Seconde vie, toujours visible en tête -- */
  .m123-card--fixe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--m123-ratio, 9 / 10);
    margin-bottom: var(--m123-marge-fixe, 14px);
  }

  /* -- Effet hover transposé en mobile : fondu automatique entre les deux visuels,
        cadencé sur les 12 s du carrousel juste en dessous -- */
  .m123-card--fixe .m123-card__hover {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: m123-fixe-fondu 12s var(--m123-ease, cubic-bezier(.22,.61,.36,1)) infinite;
    will-change: opacity;
  }

  /* -- Cadre visible du carrousel -- */
  .m123-carousel__cadre {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: var(--m123-ratio, 9 / 10);
  }

  /* -- Piste : 3 volets (Nos adresses, Fidélité + 1 clone), défilement vertical automatique.
        Hauteur déduite des volets (3 × le cadre), donc translateY(-33.3333%) = pile un volet -- */
  .m123-carousel__piste {
    display: flex;
    flex-direction: column;
    height: auto;
    animation: m123-carousel-vertical 12s cubic-bezier(.22,.61,.36,1) infinite;
    will-change: transform;
  }

  .m123-carousel__piste > .m123-card {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--m123-ratio, 9 / 10);
  }

  /* Le panneau fidélité reste centré dans son volet */
  .m123-carousel__piste > .m123-card--text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m123-card--clone {
    display: block;
  }

  /* -- Jalons de position : 2 volets réels -- */
  .m123-carousel__jalons {
    display: flex;
    gap: .4rem;
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
  }

  .m123-carousel__jalons span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--m123-ivory, #F4EFEA);
    box-shadow: 0 1px 8px rgba(0,0,0,.45);
    opacity: .35;
  }

  .m123-carousel__jalons span:nth-child(1) { animation: m123-jalon-1 12s steps(1, end) infinite; }
  .m123-carousel__jalons span:nth-child(2) { animation: m123-jalon-2 12s steps(1, end) infinite; }

  /* -- Textes : lecture horizontale classique -- */
  .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é : pleine place -- */
  .m123-panel {
    padding: clamp(20px, 6vw, 32px) 20px;
  }

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

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

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

@keyframes m123-carousel-vertical {
  0%, 41.66%  { transform: translateY(0); }
  50%, 91.66% { transform: translateY(-33.3333%); }
  100%        { transform: translateY(-66.6667%); }
}

@keyframes m123-fixe-fondu {
  0%, 40%  { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes m123-jalon-1 {
  0%, 45.99%   { opacity: 1; }
  46%, 94.99%  { opacity: .35; }
  95%, 100%    { opacity: 1; }
}
@keyframes m123-jalon-2 {
  0%, 45.99%   { opacity: .35; }
  46%, 94.99%  { opacity: 1; }
  95%, 100%    { opacity: .35; }
}

/* ===== 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;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m123-carousel__piste {
    animation: none;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--m123-gap, 2px);
  }
  .m123-carousel__cadre {
    overflow: visible;
    height: auto;
    aspect-ratio: auto;
  }
  .m123-carousel__piste > .m123-card {
    height: auto;
    aspect-ratio: var(--m123-ratio, 9 / 10);
  }
  .m123-card--fixe .m123-card__hover,
  .m123-card--clone,
  .m123-carousel__jalons {
    display: none;
  }
}