/* ============================================
   OuiTeint - Film Auto & Film Bâtiment Shared Styles
   ============================================ */

/* === TINTS === */
.tints-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.tint-item { text-align:center; cursor:pointer; transition:transform .3s ease; }
.tint-item:hover { transform:scale(1.05); }
.tint-swatch { width:100%; aspect-ratio:1; border-radius:16px; margin-bottom:12px; border:2px solid rgba(255,255,255,.1); transition:border-color .3s; }
.tint-item:hover .tint-swatch { border-color:var(--red); }
.tint-item h4 { font-size:.95rem; margin-bottom:4px; }
.tint-item p { color:var(--text-muted); font-size:.85rem; }

/* === PRICING === */
.pricing-urgency { font-size:.75rem; background:rgba(196,26,31,.15); color:var(--red); padding:8px 12px; border-radius:4px; margin-top:8px; font-weight:600; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pricing-card { background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:32px 26px; text-align:center; transition:all .3s ease; position:relative; }
.pricing-card.featured { border-color:var(--red); transform:scale(1.04); }
.pricing-card.featured::before { content:'Populaire'; position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--gradient-red); padding:5px 20px; border-radius:0 0 8px 8px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.pricing-card:hover { transform:translateY(-6px); border-color:rgba(196,26,31,.3); }
.pricing-card.featured:hover { transform:scale(1.04) translateY(-6px); }
.pricing-card h3 { font-size:1.15rem; margin-bottom:6px; }
.pricing-card .price { font-family:'Montserrat',sans-serif; font-size:2.2rem; font-weight:900; margin:16px 0; }
.pricing-card .price span { font-size:.9rem; font-weight:400; color:var(--text-muted); }
.pricing-features { list-style:none; margin:20px 0; text-align:left; }
.pricing-features li { padding:7px 0; color:var(--text-muted); display:flex; align-items:center; gap:8px; font-size:.88rem; }
.pricing-features li::before { content:''; color:var(--red); font-weight:700; display:inline-block; width:20px; height:20px; background-image:url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgb(227,30,36)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"/></svg>'); background-repeat:no-repeat; background-position:center; background-size:20px; margin-right:8px; }

/* === LEGAL TABLE === */
.legal-table { width:100%; border-collapse:collapse; background:var(--dark); border-radius:12px; overflow:hidden; }
.legal-table th { background:var(--medium-gray); padding:14px 20px; text-align:left; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; }
.legal-table td { padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-muted); font-size:.88rem; }
.legal-table tr:last-child td { border-bottom:none; }

/* === WHY CARD IMG === */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-card-img { background:var(--dark); border:1px solid rgba(255,255,255,.04); border-radius:12px; overflow:hidden; transition:all .3s ease; }
.why-card-img:hover { border-color:rgba(196,26,31,.15); transform:translateY(-3px); }
.why-card-img img { width:100%; height:150px; object-fit:cover; }
.why-card-img .card-content { padding:20px; text-align:center; }
.why-card-img h4 { font-size:.95rem; margin-bottom:4px; }
.why-card-img p { color:var(--text-muted); font-size:.85rem; }

/* === WHY CARD (no img) === */
.why-card { background:var(--dark); border:1px solid rgba(255,255,255,.04); border-radius:12px; padding:32px 24px; text-align:center; transition:all .3s ease; }
.why-card:hover { border-color:rgba(196,26,31,.15); transform:translateY(-3px); }
.why-icon { font-size:2rem; margin-bottom:16px; }
.why-card h4 { font-size:1.05rem; margin-bottom:8px; }
.why-card p { color:var(--text-muted); font-size:.88rem; }

/* ============================================
   RESPONSIVE BREAKPOINTS - FILM AUTO/BATIMENT
   ============================================ */
@media (max-width:1024px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { gap:20px; }
}

@media (max-width:768px) {
  .why-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .pricing-card.featured { transform:none; }
  .pricing-card.featured:hover { transform:translateY(-6px); }
  .tints-grid { grid-template-columns:repeat(3,1fr); }
  .quick-booking-form { grid-template-columns:1fr; }
}