/**
 * Section Témoignages + Instagram (page accueil)
 *
 * Style cinéma sombre/ambre pour matcher le design Evan Nuée :
 * - Override des classes Smash Balloon Reviews Feed (.sb_reviews_*)
 * - Layout adaptatif 1/2/3/4 cartes
 * - Mode manuel ACF + Mode shortcode Smash Balloon
 */

/* ============================================
   SECTION TÉMOIGNAGES
   ============================================ */
.section--testimonials {
  background: var(--bg);
  padding: var(--space-2xl) 0;
}

/* ============================================
   MODE MANUEL — Grille adaptative (cartes ACF)
   ============================================ */
.testimonials-grid {
  display: grid;
  gap: var(--space-lg);
  max-width: 1280px;
  margin: 0 auto;
}

.testimonials-grid--1 { grid-template-columns: minmax(0, 680px); justify-content: center; }
.testimonials-grid--2 { grid-template-columns: 1fr 1fr; }
.testimonials-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.testimonials-grid--4 { grid-template-columns: 1fr 1fr; }

/* ============================================================================
   CARROUSEL COVERFLOW (3 avis ou plus)
   ============================================================================
   La carte centrale est agrandie et nette, les cartes latérales sont
   réduites et atténuées. Navigation par flèches, dots, swipe et clavier. */

.testimonials-carousel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tc-viewport {
  overflow: hidden;
  flex: 1;
  padding: 24px 0;
}

.tc-track {
  display: flex;
  align-items: center;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Chaque slide occupe une fraction fixe de la largeur du viewport.
   La largeur réelle est pilotée en JS via --tc-slide-w pour le centrage.
   Format paysage : large et peu haut, via aspect-ratio. */
.tc-slide {
  flex: 0 0 var(--tc-slide-w, 60%);
  margin: 0 var(--tc-gap, 1.2%);
  transform: scale(.84);
  opacity: .4;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1),
              opacity .55s ease,
              border-color .35s ease;
  /* aspect-ratio donne une hauteur paysage par défaut, mais min-height
     garantit qu'un texte long n'écrase pas le contenu. */
  aspect-ratio: 16 / 9;
  min-height: 360px;
  pointer-events: none;
}

/* La carte paysage : layout interne propre, étoiles en haut, texte qui suit */
.tc-slide .testimonial-content {
  min-height: 0;
  height: 100%;
  justify-content: flex-start;
  /* Espacement vertical contrôlé pour que les étoiles ne touchent jamais
     le bord supérieur et que la signature ne sorte pas en bas */
  padding-top: clamp(20px, 4%, 36px);
  padding-bottom: clamp(20px, 4%, 36px);
}

/* Le texte s'étale large dans la carte paysage (plus de colonne étroite) */
.tc-slide.testimonial-card--photo-background .testimonial-content {
  max-width: 62%;
}

/* La carte active (centrale) : pleine échelle, nette, mise en avant */
.tc-slide.is-active {
  transform: scale(1);
  opacity: 1;
  border-color: var(--accent);
  pointer-events: auto;
  z-index: 2;
}

.tc-slide.is-active::before {
  width: 60px;
}

/* Cartes voisines immédiates : légèrement plus présentes que les lointaines */
.tc-slide.is-near {
  opacity: .7;
}

/* Flèches de navigation */
.tc-arrow {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
  z-index: 3;
}

.tc-arrow:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: scale(1.08);
}

.tc-arrow:active {
  transform: scale(.96);
}

/* Dots de pagination */
.tc-dots {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tc-dot {
  width: 24px;
  height: 2px;
  border: none;
  padding: 0;
  background: var(--line-2);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}

.tc-dot:hover {
  background: var(--fg-2);
}

.tc-dot.active {
  background: var(--accent);
  width: 40px;
}

/* Responsive : sur mobile, une carte quasi pleine largeur, voisines à peine visibles.
   On élargit légèrement le ratio (moins large/plat) pour garder le texte lisible. */
@media (max-width: 900px) {
  .tc-slide {
    flex: 0 0 var(--tc-slide-w, 82%);
    aspect-ratio: 4 / 3;
    /* min-height de sécurité : si le contenu déborde, on étend la carte
       au lieu de couper les étoiles. */
    min-height: 380px;
  }
  .tc-slide.testimonial-card--photo-background .testimonial-content {
    max-width: 78%;
  }
  .tc-arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
  .testimonials-carousel {
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .tc-slide {
    flex: 0 0 var(--tc-slide-w, 90%);
    transform: scale(.92);
    /* Sur petit écran, on laisse la carte grandir selon le contenu
       plutôt que d'imposer un ratio fixe qui ferait sortir les étoiles. */
    aspect-ratio: auto;
    min-height: 360px;
  }
  .tc-slide.testimonial-card--photo-background .testimonial-content {
    max-width: 92%;
  }
}

/* Carte d'avis individuelle (mode manuel ACF) */
/* ============================================
   CARTE D'AVIS INDIVIDUELLE (3 modes)
   ============================================
   Mode 1 — Standard (pas de photo) : layout actuel sobre
   Mode 2 — Avatar : photo ronde à gauche du contenu
   Mode 3 — Background cinéma : photo en fond avec dégradé sombre
*/

.testimonial-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease;
  min-height: 280px;
}

/* Petit trait ambre en haut (touch cinéma) */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-lg);
  width: 32px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
  z-index: 5;
}

.testimonial-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}

.testimonial-card:hover::before {
  width: 60px;
}

/* Contenu textuel (toujours présent, par-dessus le fond éventuel) */
.testimonial-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  min-height: 280px;
}

/* ============================================
   MODE 1 — Standard (pas de photo)
   ============================================ */
.testimonial-card:not(.testimonial-card--with-photo) .testimonial-content {
  /* Layout déjà OK via .testimonial-content */
}

/* ============================================
   MODE 2 — Avatar (photo ronde à gauche)
   ============================================ */
.testimonial-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line-2);
  flex-shrink: 0;
  margin-bottom: var(--space-sm);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position est défini en inline style depuis le PHP (selon photo_focus) */
  display: block;
}

.testimonial-card--photo-avatar .testimonial-content {
  /* Avatar reste en haut, le reste suit la flex column */
}

/* ============================================
   MODE 3 — Background cinéma
   ============================================
   Photo en arrière-plan + dégradé sombre droite→gauche qui laisse
   apparaître la photo subtilement à droite. */

.testimonial-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* background-position est défini en inline style depuis le PHP (selon photo_focus).
     Fallback à 'center right' si pas défini, ce qui met le sujet visible sur la droite
     où il émerge du dégradé. */
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.55;
  z-index: 0;
  transition: opacity .5s ease, transform .8s cubic-bezier(.4, 0, .2, 1);
}

.testimonial-bg-gradient {
  position: absolute;
  inset: 0;
  /* Dégradé qui part du fond opaque à gauche vers transparent à droite,
     pour faire émerger la photo sur le côté droit en laissant le texte lisible.
     La couleur du voile s'adapte au thème via --testimonial-veil. */
  background: linear-gradient(
    90deg,
    rgba(var(--testimonial-veil, 15, 15, 15), .98) 0%,
    rgba(var(--testimonial-veil, 15, 15, 15), .92) 35%,
    rgba(var(--testimonial-veil, 15, 15, 15), .75) 60%,
    rgba(var(--testimonial-veil, 15, 15, 15), .45) 85%,
    rgba(var(--testimonial-veil, 15, 15, 15), .25) 100%
  );
  z-index: 1;
}

/* Mode clair : voile crème au lieu de noir, et photo un peu plus présente */
[data-theme="light"] .testimonial-bg-gradient {
  --testimonial-veil: 242, 235, 222;
}

[data-theme="light"] .testimonial-card--photo-background .testimonial-bg {
  opacity: 0.4;
}

[data-theme="light"] .testimonial-card--photo-background:hover .testimonial-bg {
  opacity: 0.55;
}

.testimonial-card--photo-background:hover .testimonial-bg {
  opacity: 0.7;
  transform: scale(1.03);
}

/* Quand on a un fond cinéma, le contenu reste à gauche, et on limite sa largeur
   pour ne pas chevaucher la zone où la photo doit rester visible */
.testimonial-card--photo-background .testimonial-content {
  max-width: 75%;
}

/* ============================================
   RATING, TEXTE, FOOTER (communs aux 3 modes)
   ============================================ */

.testimonial-rating {
  display: flex;
  gap: 3px;
  font-size: 14px;
  line-height: 1;
}

.star { color: var(--fg-3); transition: color .25s ease; }
.star--filled { color: var(--accent); }

.testimonial-text {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--fg-2);
  flex: 1;
  border: none;
}

.testimonial-text::before {
  content: "« ";
  color: var(--accent);
  font-size: 18px;
}

.testimonial-text::after {
  content: " »";
  color: var(--accent);
  font-size: 18px;
}

.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.testimonial-author {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 400;
}

.testimonial-context {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  text-transform: uppercase;
}

.testimonial-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-3);
}

.testimonials-footer {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

/* ============================================================================
   MODE SHORTCODE — Override Smash Balloon Reviews Feed
   ============================================================================
   Cible toutes les variantes de classes utilisées par le plugin (versions 2024/2025/2026).
   On utilise !important pour battre les styles inline injectés par le plugin.
   ============================================================================ */

.testimonials-feed {
  max-width: 1280px;
  margin: 0 auto;
}

/* === 1. MASQUER les éléments parasites === */

/* Le titre "Reviews" auto-affiché par le plugin (on a notre propre <h2>) */
.testimonials-feed .sbr_header,
.testimonials-feed .sbr-header,
.testimonials-feed [class*="sbr_header"],
.testimonials-feed .sbr_feed_header,
.testimonials-feed h2.sbr_feed_title,
.testimonials-feed .sbr_feed_title,
.testimonials-feed .sb_reviews_header {
  display: none !important;
}

/* Le bouton bleu "Rédiger un avis" / "Write a review" */
.testimonials-feed .sbr_write_review,
.testimonials-feed .sbr-write-review,
.testimonials-feed [class*="sbr_write_review"],
.testimonials-feed .sbr_review_button,
.testimonials-feed .sbr_button {
  display: none !important;
}

/* Les logos Google colorés à droite de chaque carte */
.testimonials-feed .sbr_review_source_logo,
.testimonials-feed [class*="sbr_review_source_logo"],
.testimonials-feed .sbr_source_icon,
.testimonials-feed [class*="source_icon"] img,
.testimonials-feed [class*="source-icon"] img {
  display: none !important;
}

/* Le bouton "Load more" en bas */
.testimonials-feed .sbr_loadmore,
.testimonials-feed .sbr-loadmore,
.testimonials-feed [class*="loadmore"],
.testimonials-feed .sbr_load_more_btn {
  display: none !important;
}

/* === 2. LAYOUT — Grille 2/3 colonnes === */

/* Conteneur principal : grille au lieu de liste verticale */
.testimonials-feed .sbr_feed,
.testimonials-feed .sbr_reviews,
.testimonials-feed .sbr_items,
.testimonials-feed .sbr_feed_items,
.testimonials-feed [class*="sbr_feed"] > div,
.testimonials-feed [class*="sb_reviews_list"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-lg) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === 3. STYLE DES CARTES === */

/* Chaque carte d'avis */
.testimonials-feed .sbr_item,
.testimonials-feed .sbr_review,
.testimonials-feed .sbr_review_item,
.testimonials-feed [class*="sbr_review_item"],
.testimonials-feed [class*="sbr-item"],
.testimonials-feed [class*="sb_review_card"] {
  position: relative !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: var(--space-lg) !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color .35s ease, transform .35s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-sm) !important;
}

/* Petit trait ambre en haut de chaque carte (touch cinéma) */
.testimonials-feed .sbr_item::before,
.testimonials-feed .sbr_review::before,
.testimonials-feed .sbr_review_item::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: var(--space-lg) !important;
  width: 32px !important;
  height: 1px !important;
  background: var(--accent) !important;
  transition: width .4s cubic-bezier(.4, 0, .2, 1) !important;
}

.testimonials-feed .sbr_item:hover,
.testimonials-feed .sbr_review:hover,
.testimonials-feed .sbr_review_item:hover {
  border-color: var(--line-2) !important;
  transform: translateY(-3px) !important;
}

.testimonials-feed .sbr_item:hover::before,
.testimonials-feed .sbr_review:hover::before,
.testimonials-feed .sbr_review_item:hover::before {
  width: 60px !important;
}

/* === 4. AUTEUR === */

.testimonials-feed .sbr_author,
.testimonials-feed .sbr_review_author,
.testimonials-feed [class*="sbr_author"],
.testimonials-feed [class*="sbr_review_author"],
.testimonials-feed .sbr_author_name {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--fg) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.testimonials-feed .sbr_author a,
.testimonials-feed .sbr_review_author a {
  color: var(--fg) !important;
  text-decoration: none !important;
}

/* === 5. ÉTOILES — Forcer en ambre === */

.testimonials-feed .sbr_stars,
.testimonials-feed .sbr_rating,
.testimonials-feed [class*="sbr_stars"],
.testimonials-feed [class*="sbr_rating"] {
  font-size: 14px !important;
  margin: 4px 0 !important;
}

/* Toutes les étoiles : forcer la couleur ambre */
.testimonials-feed .sbr_stars svg,
.testimonials-feed .sbr_rating svg,
.testimonials-feed [class*="star"] svg,
.testimonials-feed [class*="rating"] svg,
.testimonials-feed svg[class*="star"] {
  fill: var(--accent) !important;
  color: var(--accent) !important;
  width: 16px !important;
  height: 16px !important;
}

.testimonials-feed [class*="star"] svg path,
.testimonials-feed [class*="rating"] svg path {
  fill: var(--accent) !important;
}

/* Étoiles "non remplies" (rating partiel) */
.testimonials-feed [class*="star-empty"] svg,
.testimonials-feed [class*="star_empty"] svg {
  fill: var(--fg-3) !important;
  opacity: .4 !important;
}

/* === 6. TEXTE DE L'AVIS === */

.testimonials-feed .sbr_text,
.testimonials-feed .sbr_review_text,
.testimonials-feed [class*="sbr_text"],
.testimonials-feed [class*="sbr_review_text"],
.testimonials-feed .sbr_message {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--fg-2) !important;
  margin: 0 !important;
}

/* === 7. DATE === */

.testimonials-feed .sbr_date,
.testimonials-feed .sbr_review_date,
.testimonials-feed [class*="sbr_date"],
.testimonials-feed [class*="sbr_time"] {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--fg-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding-top: var(--space-sm) !important;
  border-top: 1px solid var(--line) !important;
}

/* === 8. AVATAR — Optionnel, on cache pour épurer === */

.testimonials-feed .sbr_avatar,
.testimonials-feed [class*="sbr_avatar"],
.testimonials-feed [class*="reviewer_avatar"],
.testimonials-feed [class*="profile_image"] {
  display: none !important;
}

/* ============================================
   SECTION INSTAGRAM
   ============================================ */
.section--instagram {
  background: var(--bg-2);
  padding: var(--space-2xl) 0;
}

.instagram-handle {
  color: var(--accent);
  transition: color .25s ease;
  font-family: var(--font-display);
}

.instagram-handle:hover {
  color: var(--accent-hover);
}

.instagram-feed {
  margin-top: var(--space-lg);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Override Smash Balloon Instagram */
.instagram-feed .sbi_header_text,
.instagram-feed .sb_instagram_header,
.instagram-feed #sb_instagram_header {
  display: none !important;
}

.instagram-feed .sbi_photo {
  border-radius: 2px;
  overflow: hidden;
  transition: transform .5s ease;
}

.instagram-feed .sbi_photo:hover {
  transform: scale(1.02);
}

.instagram-feed .sbi_load,
.instagram-feed #sbi_load,
.instagram-feed .sbi_follow_btn {
  display: none !important;
}

/* Fallback */
.instagram-cta {
  margin-top: var(--space-md);
  text-align: center;
}

.instagram-cta .link-arrow {
  font-size: 13px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .testimonials-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
  .testimonials-grid--3 .testimonial-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 600px;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .testimonials-grid,
  .testimonials-grid--1,
  .testimonials-grid--2,
  .testimonials-grid--3,
  .testimonials-grid--4 {
    grid-template-columns: 1fr;
  }

  .testimonials-grid--3 .testimonial-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }

  .testimonial-card {
    min-height: 240px;
  }

  .testimonial-content {
    padding: var(--space-md);
    min-height: 240px;
  }

  .testimonial-text {
    font-size: 14px;
  }

  /* En mobile, le mode "background cinéma" : le texte peut prendre plus de place
     car la carte est en pleine largeur, mais on garde un peu de respiration à droite */
  .testimonial-card--photo-background .testimonial-content {
    max-width: 80%;
  }

  /* Avatar légèrement plus petit */
  .testimonial-avatar {
    width: 56px;
    height: 56px;
  }

  /* Sur mobile : feed plugin en 1 colonne aussi */
  .testimonials-feed .sbr_feed,
  .testimonials-feed .sbr_reviews,
  .testimonials-feed .sbr_items,
  .testimonials-feed .sbr_feed_items {
    grid-template-columns: 1fr !important;
  }
}