/* ============================================================
   MCF — Avis clients [mcf_avis] · snippet WPCodeBox de type CSS
   Le HTML vient du shortcode, donc TOUT son style vit ici
   (impossible de le régler dans les panneaux Oxygen).
   Variables : MCF-Collection / Typography / Divers.
   ============================================================ */

.mcf-avis{
  position: relative;
  width: 100%;
  max-width: var(--width-section-desktop);
  margin-inline: auto;
  padding-inline: var(--gaplg);          /* place pour les flèches */
}

/* ---- piste ---- */
.mcf-avis__track{
  display: flex;
  gap: var(--gapmd);
  overflow-x: auto;
  overflow-y: visible;
  padding-block: var(--gapmd);           /* respiration pour l'ombre */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
}
.mcf-avis__track::-webkit-scrollbar{ display: none; }   /* Chrome/Safari */

/* ---- carte ---- */
.mcf-avis__card{
  flex: 0 0 calc((100% - 2 * var(--gapmd)) / 3);   /* 3 visibles desktop */
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gapsm);
  padding: var(--gapmd);
  border-radius: var(--radius);
  background: var(--secondaryblue);
  color: var(--blanc);
  box-shadow: 0 18px 30px -18px var(--shadowblue);
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}

/* carte au centre = blanche, légèrement surélevée (cf. maquette) */
.mcf-avis__card.is-center{
  background: var(--blanc);
  color: var(--textgray);
  transform: translateY(-6px);
  box-shadow: 0 22px 36px -18px var(--shadowneutral);
}

/* ---- étoiles ---- */
.mcf-avis__etoiles{ display: flex; gap: 4px; color: #ffb43a; }  /* or : valeur unique, en dur */
.mcf-avis__etoile.is-off{ opacity: .3; }
.mcf-avis__etoile svg{ display: block; }

/* ---- texte ---- */
.mcf-avis__texte{
  margin: 0;
  font-size: var(--fontsizebody);
  line-height: var(--fontlhbody);
}

/* ---- auteur ---- */
.mcf-avis__auteur{
  display: flex;
  align-items: center;
  gap: var(--gapxs);
  margin-top: auto;                       /* colle en bas, cartes égales */
}
.mcf-avis__badge{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lineargradientorange360);
  color: var(--blanc);
}
.mcf-avis__nom{
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}
.mcf-avis__profil{
  display: block;
  font-weight: 400;
  text-transform: none;
  font-size: var(--fontsizesmall);
}
.mcf-avis__card.is-center .mcf-avis__profil{ color: var(--secondaryblue); }

/* ---- flèches ---- */
.mcf-avis__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--lineargradientorange360);
  color: var(--blanc);
  box-shadow: 0 6px 14px -4px var(--shadoworange);
  transition: filter .2s, opacity .2s;
}
.mcf-avis__arrow:hover{ filter: brightness(.94); }
.mcf-avis__arrow--prev{ left: 0; }
.mcf-avis__arrow--next{ right: 0; }
.mcf-avis__arrow.is-disabled{ opacity: .35; cursor: default; pointer-events: none; }

/* ---- responsive ---- */
@media (max-width: 991px){
  .mcf-avis__card{ flex-basis: calc((100% - var(--gapmd)) / 2); }  /* 2 visibles */
}
@media (max-width: 767px){
  .mcf-avis{ padding-inline: var(--gapsm); }
  .mcf-avis__card{ flex-basis: 85%; }     /* 1 carte + bord de la suivante */
  .mcf-avis__arrow{ display: none; }      /* au doigt, le swipe suffit */
}

/* ---- fix responsive : le wrapper Oxygen du shortcode ne s'étire pas ----
   Le conteneur de section est en flex colonne + align-items:center →
   .oxy-shortcode prend la largeur de son CONTENU et déborde en mobile.
   Sélecteur relationnel → sa place est ici, pas dans Oxygen. */
.oxy-shortcode:has(> .mcf-avis){ width: 100%; min-width: 0; }