/* FILE: testimonials.css */
/* === Section base === */
.testimonials{
  padding: 72px 16px;
  color: var(--offwhite);
  position: relative;
}
.tst-inner{ max-width: 1200px; margin: 0 auto; }

.tst-title{
  text-align: center;
  margin: 0 0 .35rem;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: .08em !important;
  font-size: clamp(28px, 3.2vw, 40px);
  text-transform: uppercase !important;
}
.tst-subtitle{
  text-align: center;
  margin: 0 auto 24px;
  max-width: 70ch;
  color: rgba(245,245,245,.85);
  line-height: 1.6;
}

/* === Slider (sans coupure) === */
.tst-slider{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 6px;
  padding-inline: 6px; /* pas d’overlay, juste un petit buffer */
}
.tst-slider::-webkit-scrollbar{ display: none; }

.tst-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
}

/* Cartes */
.tst-card{
  flex: 0 0 min(520px, 86vw);
  box-sizing: border-box;
  background: rgba(12,12,12,.9);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 18px 18px 16px;
}
.tst-stars{ color: #FFD166; letter-spacing: .08em; margin-bottom: .5rem; }
.tst-quote{
  margin: 0 0 .9rem;
  color: rgba(245,245,245,.92);
  line-height: 1.65;
}
.tst-author{ display: flex; align-items: center; gap: .6rem; }
.tst-avatar{
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
}
.tst-name{ font-weight: 600; }

/* CTA */
.tst-cta{ text-align: center; margin-top: 18px; }
.tst-cta-btn{
  display: inline-block;
  padding: 8px 10px;
  color: var(--offwhite); text-decoration: none;
  border-radius: 10px;
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease;
}
.tst-cta-btn:hover, .tst-cta-btn:focus-visible{
  color: var(--copper);
  transform: translateY(-1px);
  outline: none;
  text-shadow: 0 0 12px rgba(184,115,51,.25);
}

/* Responsive */
@media (min-width: 1024px){
  .testimonials{ padding: 88px 24px; }
  .tst-track{ gap: 24px; }
  .tst-card{ flex-basis: min(540px, 44vw); }
}

/* Mobile improvements: add spacing below testimonials */
@media (max-width: 768px){
  .testimonials{
    padding: 180px 16px 100px !important;
    margin-bottom: 40px;
  }
  
  .tst-title{
    font-size: clamp(26px, 5vw, 36px);
    margin-bottom: 1rem;
  }
  
  .tst-card{
    flex: 0 0 min(480px, 90vw);
  }
}

/* Accessibilité / safety */
@media (prefers-reduced-motion: reduce){
  .tst-cta-btn{ transition: none !important; }
}
/* === Full-bleed + no clipping === */
.testimonials { overflow: visible; }
.tst-inner { overflow: visible; }

/* PAS DE REDÉFINITION de .tst-slider ici - on utilise celle du début du fichier */

/* Track and cards shouldn't be clipped either */
.tst-track{
  padding-block: 2px;                             /* tiny buffer to avoid shadows cut */
  overflow: visible;
}

.tst-card{
  /* keep your existing styles, just ensure no cropping */
  overflow: visible;
}

/* If any ancestor sets overflow hidden via global styles, neutralize locally */
#testimonials, #testimonials *{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* PAS de snap - on laisse le JS gérer l'auto-scroll */
.tst-slider{ scroll-snap-type: none !important; }
.tst-card{ scroll-snap-align: none !important; }
/* === Full-bleed carousel using your IDs (#tslider / #ttrack) === */
.temoignages { overflow: visible; }
.temoignages .container { overflow: visible; }

/* Make the slider span the full viewport width and keep soft gutters */
#tslider{
  margin-inline: calc(50% - 50vw);   /* pull to screen edges */
  width: 100vw;                      /* full-bleed */
  padding-inline: clamp(16px, 4vw, 40px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: none !important; /* PAS de snap pour l'auto-scroll */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#tslider::-webkit-scrollbar{ display:none; }

#ttrack{
  display: flex;
  gap: clamp(16px, 2.5vw, 28px);
  overflow: visible;                  /* no clipping of shadows */
  padding-block: 2px;                 /* avoid inner cuts */
}

/* Cards */
.testimonial-card{
  min-width: clamp(280px, 46vw, 560px);  /* responsive card width */
  scroll-snap-align: none !important; /* PAS de snap */
  scroll-margin-inline: clamp(16px, 4vw, 40px); /* nice alignment at edges */
  overflow: visible;
}

/* Kill any masks/overlays that could crop */
.temoignages,
.temoignages *{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* (Optional) subtle edge fades so cards feel centered */
#tslider::before, #tslider::after{
  content:"";
  position: sticky;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
}
#tslider::before{ left: 0; background: transparent; }
#tslider::after { right: 0; background: transparent; }

/* PAS DE REDÉFINITION de .tst-slider ici - utilise celle du début */

/* La piste défile horizontalement */
.tst-track{
  display: flex;
  gap: 20px;
  padding: 12px 0;
  will-change: transform;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* Cartes : largeur fixe responsive, pas d'étirement */
.tst-card{
  flex: 0 0 min(520px, 86vw);
  scroll-snap-align: none !important;
  box-sizing: border-box;
}

/* Cache la scrollbar */
.tst-slider::-webkit-scrollbar{ display:none; }
.tst-slider{ -ms-overflow-style:none; scrollbar-width:none; }
/* FILE: testimonials.css — premium minimal */

/* Section */
.testimonials{
  position: relative;
  padding: clamp(56px,7vw,88px) 0;
  color: var(--offwhite);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.05), transparent 60%) ,
              radial-gradient(900px 500px at 0% 0%, rgba(255,255,255,.03), transparent 60%);
  overflow: hidden;
}
.tst-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px,4vw,32px);
  position: relative;
  z-index: 1;
}

/* Headings - INTER + CAPS */
.tst-title{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800;
  letter-spacing: .08em !important;
  text-align: center;
  font-size: clamp(26px, 3.2vw, 40px);
  margin: 0 0 .35rem;
  text-transform: uppercase !important;
}
.tst-subtitle{
  text-align: center;
  opacity: .85;
  margin: .1rem 0 1.1rem;
  font-size: clamp(.98rem, 1.3vw, 1.05rem);
}

/* PAS DE REDÉFINITION de .tst-slider ici */

/* Rail */
.tst-track{
  display: flex;
  gap: clamp(24px, 3.2vw, 36px) !important;
  padding: 6px 2px;          /* mini padding pour les ombres */
}

/* Cards */
.tst-card{
  flex: 0 0 clamp(280px, 31vw, 420px);
  background: rgba(10,10,10,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 38px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tst-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 48px rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.12);
}

/* Stars */
.tst-stars{
  font-size: .95rem;
  letter-spacing: .06em;
  color: color-mix(in oklab, var(--copper) 88%, #fff 12%);
  margin: .1rem 0 .55rem;
}

/* Quote */
.tst-quote{
  margin: 0 0 .9rem;
  line-height: 1.45;
  color: rgba(245,245,245,.92);
}

/* Author row */
.tst-author{
  display: flex; align-items: center; gap: .6rem;
}
.tst-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  display: block; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.35);
}
.tst-name{
  font-weight: 600; font-size: .95rem;
  color: color-mix(in oklab, var(--offwhite) 92%, #fff 8%);
}

/* CTA sous le slider */
.tst-cta{
  text-align: center;
  margin: 20px 0 0;
}
.tst-cta-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.4rem !important;
  border-radius: 999px !important;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--offwhite);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  font-size: 1rem;
}
.tst-cta-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* Responsive affinement */
@media (max-width: 720px){
  .tst-card{ padding: 14px; border-radius: 14px; }
  .tst-quote{ font-size: .98rem; }
}

/* Optional: légère séparation visuelle section suivante */
.testimonials + .elite-footer-section{ margin-top: -2px; }
/* --- Ajustements rapides --- */

/* Sous-titre mieux centré et lisible */
.tst-subtitle{
  text-align: center;
  max-width: 820px;     /* limite la largeur pour une ligne propre */
  margin: .1rem auto 1.1rem; /* centre horizontalement */
}

/* Bouton "Voir tous nos avis Google" : jamais souligné */
.tst-cta-btn{
  text-decoration: none !important;
}
.tst-cta-btn:hover,
.tst-cta-btn:focus,
.tst-cta-btn:active{
  text-decoration: none !important;
}

/* (optionnel) focus visible propre, sans soulignement */
.tst-cta-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12),
              0 0 0 6px color-mix(in oklab, var(--copper) 45%, #fff 0%);
}

/* PAS DE REDÉFINITION de .tst-slider ici */

/* Piste horizontale */
.tst-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  scroll-snap-type: none;
}

/* Cartes */
.tst-card{
  flex: 0 0 clamp(280px, 32vw, 420px);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
/* === TESTIMONIALS — DÉSACTIVÉ - Causait des valeurs incohérentes ===
   Le padding est maintenant géré par mobile-spacing-fix.css et inline CSS
#testimonials.testimonials{
  padding-top: calc(env(safe-area-inset-top) + clamp(200px, 26vh, 300px));
  padding-bottom: clamp(56px, 7vw, 88px);
  scroll-margin-top: 110px;
}

html.panel-open #testimonials.testimonials{
  padding-top: calc(env(safe-area-inset-top) + clamp(220px, 28vh, 320px)) !important;
}

@media (max-width: 640px){
  #testimonials.testimonials{
    padding-top: calc(env(safe-area-inset-top) + 180px) !important;
  }
}
*/

/* Padding-bottom et scroll-margin conservés */
#testimonials.testimonials{
  padding-top: 180px !important;
  padding-bottom: clamp(56px, 7vw, 88px) !important;
  scroll-margin-top: 110px;
}

#testimonials {
  padding-top: 180px !important;
}

/* 🎯 Titres testimonials - margin-top à 0 pour uniformiser avec les autres sections */
#testimonials .tst-title{ margin-top: 0 !important; }
#testimonials .tst-subtitle{ margin-top: .35rem; }

/* === CONTACT - DÉSACTIVÉ - Padding géré par mobile-spacing-fix.css ===
#contact.elite-footer-section{
  padding-top: clamp(180px, 24vh, 280px);
  scroll-margin-top: 120px;
}
*/

/* Scroll margin conservé */
#contact.elite-footer-section{
  scroll-margin-top: 120px;
}

/* Mobile override - garde le 180px */
@media (max-width: 640px){
  #contact.elite-footer-section{
    padding-top: 180px !important;
  }
}

/* 🔥 DÉSACTIVÉ - Padding géré par mobile-spacing-fix.css
html.panel-open #contact.elite-footer-section{
  padding-top: clamp(200px, 26vh, 320px);
}
*/

/* Si tu veux aussi creuser l’espace juste AVANT la carte */
.elite-map-wrapper-premium{
  margin-top: clamp(18px, 3vh, 32px);  /* ↑ ou ↓ selon ton goût */
}
/* === CONTACT — horaire plus clean (sans toucher au HTML) === */

/* 1) grille + centrage harmonieux des 3 colonnes */
#contact .footer-info-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 3vw, 38px);
  align-items: start;
  text-align: center;
}

/* 2) titres compacts */
#contact .footer-box h4{
  margin: 0 0 .35rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* 3) paragraphe de chaque bloc */
#contact .footer-box p{
  margin: 0;
  line-height: 1.6;
}

/* 4) bloc “Heures d’ouverture” : meilleure mise en page */
#contact .footer-box:nth-child(2) p{
  /* on contraint la largeur pour provoquer un retour à la ligne naturel
     juste après le “:”, sans trancher les mots */
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
  word-break: keep-all;
  white-space: normal;
  font-variant-numeric: tabular-nums; /* chiffres alignés */
}

/* FR & EN : on force l’affichage en bloc pour bien centrer */
#contact .footer-box:nth-child(2) p > .i18n-fr,
#contact .footer-box:nth-child(2) p > .i18n-en{
  display: block;
}

/* 5) micro-polish : léger adoucissement + lisibilité */
#contact .footer-box:nth-child(2) p{
  color: rgba(245,245,245,.92);
  letter-spacing: .01em;
}

/* 6) mobile : un chouïa plus étroit pour garantir le saut de ligne */
@media (max-width: 640px){
  #contact .footer-box:nth-child(2) p{ max-width: 22ch; }
}
/* labels en petite-caps, heures un peu plus denses */
#contact .footer-box h4{
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  opacity: .9;
}

#contact .footer-box:nth-child(2) p{
  font-variant-numeric: tabular-nums; /* chiffres alignés */
  line-height: 1.35;
}
#contact .footer-box:nth-child(2) p .i18n-fr,
#contact .footer-box:nth-child(2) p .i18n-en{
  display: block;
}
/* force le retour à la ligne après les jours */
#contact .footer-box:nth-child(2) p{ max-width: 24ch; margin-inline:auto; text-wrap: balance; }
@media (max-width:640px){ #contact .footer-box:nth-child(2) p{ max-width: 22ch; } }
#contact .footer-info-columns{ row-gap: 16px; }
#contact .footer-box p{ margin: .2rem 0 0; }
#contact .footer-info-columns{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap: clamp(18px,3vw,40px); align-items:start; text-align:center;
}
#contact .footer-box a{
  text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
#contact .footer-box a:hover,
#contact .footer-box a:focus-visible{
  color: var(--copper); border-bottom-color: currentColor; outline:0;
}
.elite-map-wrapper-premium{
  width: min(820px, 88vw);
  margin: 14px auto 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.elite-map-iframe-premium{ width:100%; height: 320px; border:0; }
@media (max-width:640px){ .elite-map-iframe-premium{ height: 260px; } }
/* ——— CONTACT • micro-polish & layout tidy ——— */

/* 1) Grille alignée + gouttières confort */
#contact .footer-info-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(20px, 5vw, 56px);
  align-items: start;
  text-align: center;               /* garde le style actuel */
}

/* 2) Diviseurs fantômes entre colonnes (desktop) */
@media (min-width: 980px){
  #contact .footer-info-columns{ position: relative; }
  #contact .footer-info-columns::before,
  #contact .footer-info-columns::after{
    content:"";
    position: absolute; top: 6px; bottom: 6px; width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0),
                                           rgba(255,255,255,.22),
                                           rgba(255,255,255,0));
    opacity: .22; pointer-events: none;
  }
  #contact .footer-info-columns::before{ left: 33.333%; transform: translateX(-.5px); }
  #contact .footer-info-columns::after { left: 66.666%; transform: translateX(-.5px); }
}

/* 3) Labels discrets en petite-caps */
#contact .footer-box h4{
  margin: 0 0 .35rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  font-size: .82rem;
  opacity: .9;
}

/* 4) Texte: rythme régulier */
#contact .footer-box p{
  margin: .18rem 0 0;
  line-height: 1.6;
}

/* 5) Heures: chiffres alignés + un peu plus “forts” */
#contact .footer-box:nth-child(2) p{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
}

/* 6) Téléphone / Email empilés & cliquables */
#contact .footer-box:nth-child(3) p a{
  display: block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
#contact .footer-box:nth-child(3) p a:hover,
#contact .footer-box:nth-child(3) p a:focus-visible{
  color: var(--copper);
  border-bottom-color: currentColor;
  outline: 0;
}

/* 7) Respire un poil plus au-dessus de la carte */
.elite-map-wrapper-premium{ margin-top: clamp(14px, 2.2vh, 26px); }
/* === TESTIMONIALS — i18n toggle FR/EN =========================== */
#testimonials .i18n-fr{ display:inline; }
#testimonials .i18n-en{ display:none; }

/* (optionnel) petit switch FR/EN sous le titre */
.tst-lang-switch{
  display:inline-flex; gap:12px; align-items:center;
  justify-content:center; margin:.25rem 0 .8rem;
}
.tst-lang-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:rgba(245,245,245,.92); padding:4px 8px; border-radius:8px;
  font:inherit; transition:color .16s ease, transform .16s ease;
}
.tst-lang-btn[aria-pressed="true"]{ color: var(--copper); }
.tst-lang-btn:hover, .tst-lang-btn:focus-visible{ color: var(--copper); outline:none; transform: translateY(-1px); }
/* === TESTIMONIALS — INTER LOCK (append at end of testimonials.css) === */

/* 0) variable qui pointe vers Inter (variable si dispo) */
:root{
  --font-body: "InterVariable","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* 1) Inter partout dans la section (sans impacter icônes/code) */
#testimonials,
#testimonials :where(*):not(svg):not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre),
.testimonials,
.testimonials :where(*):not(svg):not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre){
  font-family: var(--font-body) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* 2) Titres Inter (remplace Playfair), look éditorial propre */
#testimonials .tst-title,
.testimonials .tst-title{
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  /* si tu veux du full CAPS : dé-commente */
  /* text-transform: uppercase; letter-spacing: .06em; */
}

/* 3) Sous-titre, citations, noms, CTA → Inter cohérent */
#testimonials .tst-subtitle,
#testimonials .tst-quote,
#testimonials .tst-name,
#testimonials .tst-cta-btn,
.testimonials .tst-subtitle,
.testimonials .tst-quote,
.testimonials .tst-name,
.testimonials .tst-cta-btn{
  font-family: var(--font-body) !important;
}

/* 4) Micro-tuning : graisse/track sympa pour le bouton */
#testimonials .tst-cta-btn,
.testimonials .tst-cta-btn{
  font-weight: 600 !important;
  letter-spacing: .04em;
}

/* 5) Mobile: tracking un peu réduit pour le titre Inter */
@media (max-width:640px){
  #testimonials .tst-title,
  .testimonials .tst-title{ letter-spacing: .015em; }
}

/* ========================================
   🎯 AUTO-SCROLL CARROUSEL - SIMPLE & EFFICACE
   ======================================== */

/* Configuration minimale pour que l'auto-scroll fonctionne */
.tst-slider{
  /* Le JS gère tout - on ne force rien ici */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  padding-inline: clamp(16px, 4vw, 40px);
}

.tst-track{
  /* GPU acceleration léger */
  transform: translateZ(0);
}

/* Transitions douces sur les cartes */
.tst-card{
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  transform: translateZ(0);
}

/* Effet hover premium */
.tst-card:hover, 
.tst-card:focus-within{
  transform: translateY(-4px) scale(1.01) translateZ(0);
  box-shadow: 0 28px 80px rgba(0,0,0,.5), 
              inset 0 1px 0 rgba(255,255,255,.12);
  border-color: rgba(200,168,107,.15);
}

/* Mobile: effet touch */
@media (max-width: 768px){
  .tst-card:active{
    transform: translateY(-6px) scale(1.02) translateZ(0);
  }
}

/* Edge fades subtils */
.tst-slider::before, 
.tst-slider::after{
  content: "";
  position: sticky;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}

.tst-slider::before{ 
  left: 0; 
  background: transparent;
}

.tst-slider::after{ 
  right: 0; 
  background: transparent;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .tst-card,
  .tst-track{ 
    transition: none !important;
    will-change: auto !important;
  }
}

/* ========================================
   🔥 MOBILE SPACING FIX - FINAL OVERRIDE
   MUST BE LAST IN FILE
   ======================================== */
@media (max-width: 768px) {
  .testimonials,
  #testimonials,
  section.testimonials,
  section#testimonials,
  #testimonials.testimonials {
    padding-top: 180px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  .testimonials,
  #testimonials,
  section.testimonials,
  section#testimonials,
  #testimonials.testimonials {
    padding-top: 180px !important;
  }
}