/* ============================================
   OuiTeint - Home Page Specific Styles
   ============================================ */

/* === TESTIMONIALS & CAROUSEL === */
.testimonial-card { background:var(--dark); border:1px solid rgba(255,255,255,.04); border-radius:12px; padding:28px; }
.testimonial-stars { color:#FFB800; font-size:1rem; margin-bottom:12px; letter-spacing:1px; display:flex; gap:2px; }
.testimonial-card p { color:var(--text-muted); font-style:italic; line-height:1.6; margin-bottom:16px; font-size:.9rem; }
.testimonial-author { display:flex; align-items:center; gap:10px; }
.testimonial-avatar { width:38px; height:38px; border-radius:50%; background:var(--gradient-red); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }
.testimonial-author h5 { font-size:.88rem; }
.testimonial-author span { color:var(--text-muted); font-size:.78rem; }
.review-service-tag { display:inline-block; background:rgba(196,26,31,.12); color:var(--red); font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:20px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.5px; }

/* Carousel wrapper */
.reviews-carousel-wrapper { display:flex; align-items:center; gap:12px; position:relative; }
.reviews-carousel-track-container { flex:1; overflow:hidden; border-radius:12px; }
.reviews-carousel-track { display:flex; gap:20px; transition:transform .45s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.reviews-carousel-track .carousel-card { flex:0 0 calc(33.333% - 14px); min-width:0; }

/* Carousel nav buttons */
.reviews-carousel-btn { width:44px; height:44px; border-radius:50%; background:var(--dark); border:1px solid rgba(255,255,255,.1); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all .25s; }
.reviews-carousel-btn:hover { background:var(--red); border-color:var(--red); transform:scale(1.08); }
.reviews-carousel-btn:disabled { opacity:.3; cursor:default; transform:none; }
.reviews-carousel-btn:disabled:hover { background:var(--dark); border-color:rgba(255,255,255,.1); }

/* Carousel dots */
.reviews-carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:20px; }
.reviews-carousel-dots .dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); cursor:pointer; transition:all .25s; border:none; padding:0; }
.reviews-carousel-dots .dot.active { background:var(--red); width:24px; border-radius:4px; }

/* Btn sm variant */
.btn-sm { font-size:.82rem; padding:10px 20px; }

/* (Modal styles déplacés dans global.css pour fiabilité) */

/* === PROFESSIONAL LOGOS === */
.pro-logos { margin:0; padding:32px 0; border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); overflow:hidden; }
.pro-logos-title { text-align:center; font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:20px; font-weight:500; }
.logos-marquee { display:flex; gap:64px; animation:marquee 20s linear infinite; }
.logos-marquee:hover { animation-play-state:paused; }
.logo-item { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem; color:rgba(255,255,255,.25); white-space:nowrap; transition:color .3s; }
.logo-item:hover { color:rgba(255,255,255,.6); }

/* === RATING DISPLAY === */
.rating-display { display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:8px 16px; border-radius:30px; }
.rating-stars { color:#FFB800; font-size:.9rem; letter-spacing:1px; display:flex; gap:2px; align-items:center; }
.rating-text { font-size:.82rem; color:var(--text-muted); }
.rating-text strong { color:var(--white); }

/* === IMAGE GRID === */
.img-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.img-grid img { width:100%; height:250px; object-fit:cover; border-radius:12px; transition:transform .3s; }
.img-grid img:hover { transform:scale(1.03); }

/* === CALLBACK WIDGET === */
.callback-widget { background:rgba(196,26,31,.05); border:1px solid rgba(196,26,31,.15); border-radius:12px; padding:20px; margin:32px 0; }
.callback-fields { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.callback-widget input { flex:1; min-width:180px; padding:12px; background:var(--medium-gray); border:1px solid rgba(255,255,255,.1); border-radius:6px; color:var(--white); font-family:'Inter',sans-serif; }
.callback-widget input::placeholder { color:var(--text-muted); }
.callback-widget button { padding:12px 20px; background:var(--red); color:var(--white); border:none; border-radius:6px; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform .2s,box-shadow .2s; }
.callback-widget button:hover { transform:translateY(-2px); box-shadow:var(--shadow-red); }

/* ============================================
   RESPONSIVE BREAKPOINTS - HOME PAGE
   ============================================ */
@media (max-width:1024px) {
  .reviews-carousel-track .carousel-card { flex:0 0 calc(50% - 10px); }
}

@media (max-width:768px) {
  .reviews-carousel-track .carousel-card { flex:0 0 100%; }
  .reviews-carousel-btn { width:36px; height:36px; }
  .reviews-carousel-wrapper { gap:8px; }
}